http://www.w3school.com.cn/tags/html_ref_canvas.asp
http://www.w3school.com.cn/tags/canvas_drawimage.asp
一、canvas demo
1、canvas01.html
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#f00";
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
canvas01.gif
2、canvas02-createLinearGradient.html
canvas02.gif
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// context.createLinearGradient(x0,y0,x1,y1);
// x0: 渐变开始点的 x 坐标
// y0: 渐变开始点的 y 坐标
// x1:渐变结束点的 x 坐标
// y1:渐变结束点的 y 坐标
var grd=ctx.createLinearGradient(0, 0, 200, 0);
// 如果您不对 gradient 对象使用addColorStop方法，那么渐变将不可见。
// 为了获得可见的渐变，您需要创建至少一个色标。
// grd.addColorStop(stop, color)
// stop: 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
// color:在结束位置显示的 CSS 颜色值
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
ctx.fillStyle=grd;
ctx.fillRect(10, 10, 200, 150);
</script>
</body>
3、canvas03-strokeText.html
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
// context.strokeText(text,x,y,maxWidth);
// text: 规定在画布上输出的文本;x,y:开始绘制文本的坐标位置（相对于画布）;
// maxWidth 可选。允许的最大文本宽度，以像素计。
ctx.strokeText("Hello world",10,90);
</script>
</body>
canvas03-strokeText.gif
4、HTML5 canvas drawImage() 方法
<body>
<p>要使用的图像：</p>
<p>画布：</p>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
</script>
drawImage.gif
小技巧：HTML5 cavas画布加载图片
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/img/flower.png";
img.onload = function () //确保图片已经加载完毕
{
cxt.drawImage(img,100,100);
}
</script>
</body>
</html>
二、案例wxshop:用canvas加载图片
1、修改index.html和pproductlist.html商品列表中的标签
<!--  -->
<canvas data-src="images/product/product1.png"></canvas>
2、修改样式（sass/module/content.scss）
canvas{
width: 100px;
min-height:100px;
background: #fff url(../images/loading.gif) center center no-repeat;
background-size: 15px auto; //不写也没关系???
}
3、添加mainconfig.js
1)常用函数放于js>commonobj.js中 ???
`
