HTML canvas画布

给大家介绍一种有意思的画布，那就是h5的画布canvas

（1）canvas元素
width、height 和style 里面的width、height一样么？
如果直接设置canvas的width和height ：画布和元素的宽度都是你设置的值。
如果设置的Style里面的width和height，它仅表示canvas元素占文档流的位置。这时候画布的宽度和高度是默认值。分别是600、300.
注意：
（1）设置canvas的宽度的，直接操作canvas的width和height属性。如果需要放大canvas画布，设置的CSS width和height应该和canvas width、height属性值，比例保持一致，说白了就是等比缩放。
（2）canvas元素是 行内元素
(2)坐标系
坐标的原点是在 左上角 ，这一点和数学上不大一样。


(3)描边和填充


（4）常用方法
4.1 getContext():获取渲染的上下文，说白了，获取画笔。后面传递的参数，固定写"2d"；
var context = canvas.getContext("2d");
4.2 moveTo(x,y):移动画笔的位置，后面带2个参数。
context.moveTo(100,200);


4.3 lineTo（x,y）画一条线，参数是线的终点位置。
context.lineTo(400,300);//目标位置
和线条相关的属性：
lineWidth：线条的宽度
strokeStyle:线条的颜色
4.4 stroke();绘制线条
context.stroke();
4.5 closePath();关闭路径，也就是回到起始点。
context.closePath()
4.6 fillStyle ;这是属性，设置填充的样式，一般填充颜色就可以。
ctx.fillStyle = "yellow";
4.7 ctx.fill();完成填充操作。
ctx.fill();
4.8 beginPath() 方法开始一条路径，或重置当前的路径。
ctx.closePath()


4.9 context.arc(x,y,r，start,end, direction)绘制一个弧。前面2个参数组成圆心的坐标，第三个参数r半径。第4个参数：start起始的弧度，第5个参数end，结束的弧度；最后一个参数direction，绘制方向，true:逆时针方向，false：顺时针方向，该值默认是false。
context.arc(200,200,100,0,1/2*Math.PI,true);
4.10 context.rect(x,y,w,h)绘制矩形，（x,y）是矩形左上角的坐标位置，w:矩形的宽度，h:矩形的高度。