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);

完美理解