1、canvas标签用法
1.1、canvas案例一 填充背景颜色
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(10,10,200,100);
</script>
![这里写图片描述](https://img-blog.csdn.net/20150623164010769)
1.2、canvas案例二 绘制圆
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c2=$("#myCanvas2")[0];
var ctx2=c2.getContext("2d");
ctx2.beginPath();
ctx2.arc(95,50,40,0,2*Math.PI);
ctx2.stroke();
</script>
![这里写图片描述](https://img-blog.csdn.net/20150623164732045)
1.3、canvas绘制图片
ctx.drawImage(img,10,10);
1.4、canvas案例四 绘制渐变
var c3=document.getElementById("myCanvas3");
var ctx3=c3.getContext("2d");
var grd3=ctx3.createLinearGradient(0,0,200,0);
grd3.addColorStop(0,"red");
grd3.addColorStop(1,"white");
ctx3.fillStyle=grd3;
ctx3.fillRect(10,10,150,80);
![这里写图片描述](https://img-blog.csdn.net/20150623171431212)