h5 canvas 绘图

绘图原理 canvas+js 协作，h5

<canvas>

标签提供绘图区域，设置宽高，边框，本身没有绘图功能。绘图的功能得教给js来完成。

1.建立联系，获取元素，在元素上创建绘图对象

2.理解绘图思想：绘图的过程是 先画草稿 –> 真正画图

beginPath()这个方法，就是告诉程序，我要开始画草稿了，把前面没有真正画图的草稿都清除了。

然后草稿我们可以画线，画圆，矩形可以通过画线来得到，所以fillRect()可以认为是画矩形的便捷方法。

closePath()是创建从当前点到开始点的路径，并不是关闭路径的意思。像画三角形两条线后可以用一波，画圆的时候也用一波(不用也没啥感觉，估计是严谨，毕竟要闭合嘛)

草稿弄完了，就要真正画图 有stroke() 和 fill() 两个方法，一个画线，一个是填充，还可以在画前，给他们指定颜色，像那种fillRect()作为快捷方法放到这块理解。

至于渐变背景，可以理解为一个颜色，创建出这个渐变颜色，其他操作都一样了。

其他 还有把一幅图放到画布上，比较独立了。

html代码
<canvas width="500px" height="500px" style="..."></canvas>
----------------------------------------------------------
js代码
//准备工作
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//开始打草稿画图
//画三角形
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();
//画圆
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fillStyle="#FF0000";
cxt.fill();//想画空心圆就用stroke()
//快捷方法画矩形
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
//画渐变背景
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
//加载图片
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

完美理解