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: 漸變開始點(diǎn)的 x 坐標(biāo)
// y0: 漸變開始點(diǎn)的 y 坐標(biāo)
// x1:漸變結(jié)束點(diǎn)的 x 坐標(biāo)
// y1:漸變結(jié)束點(diǎn)的 y 坐標(biāo)
var grd=ctx.createLinearGradient(0, 0, 200, 0);
// 如果您不對 gradient 對象使用addColorStop方法芳来，那么漸變將不可見牧抽。
// 為了獲得可見的漸變，您需要創(chuàng)建至少一個色標(biāo)。
// grd.addColorStop(stop, color)
// stop: 介于 0.0 與 1.0 之間的值剪芥，表示漸變中開始與結(jié)束之間的位置。
// color:在結(jié)束位置顯示的 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: 規(guī)定在畫布上輸出的文本;x,y:開始繪制文本的坐標(biāo)位置（相對于畫布）;
// 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 () //確保圖片已經(jīng)加載完畢
{
cxt.drawImage(img,100,100);
}
</script>
</body>
</html>
二、案例wxshop:用canvas加載圖片
1箭券、修改index.html和pproductlist.html商品列表中的標(biāo)簽
<!--  -->
<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; //不寫也沒關(guān)系???
}
3、添加mainconfig.js
1)常用函數(shù)放于js>commonobj.js中 ???
`
