H5-cnavas画布

HTML5 Canvas画布

（1）canvas元素

width和height跟style里面的width和height一样吗？
如果之际设置canvas的width和height：画布和元素的宽度都是你设置的值。
如果设置的style里面的width和height，它仅表示canvas元素占文档流的位置。这时候画布的宽度和高度是默认值。分别是600，300。
注：设置canvas的宽度和高度，直接操作canvas的width和height属性。如果需要放大canvas画布，设置的CSS width和height应该和canvas width、height属性值，比例保持一致，说白了就是等比缩放。

（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(50,300);

和线条相关的属性：
lineWidth：线条的宽度
strokeStyle：线条的颜色
4.4 stroke()；绘制context.stroke(); closePath()；关闭路径，也就是回到起始点。

context.closePath();

4.6 fillStyle()；这时属性，设置填充的样式，一般填充颜色就可以了。

context.fillStyle = "blue";

4.7 fill()；完成填充操作

context.fill();

4.8 beginPath()；方法：开始一条路径，或重置当前的路径。

context.beginPath();

4.9 context.arc(x,y,r,start,end,direction)绘制一条弧。前面2个参数组成圆心的坐标；第三个参数r半径；第四个参数：start起始的弧度；第五个参数：end结束的弧度；最后一个参数direction是绘制的方向：true逆时针，默认false是顺时针。

context.arc(200,200,100,0,1/2*Math.PI,true);

4.10 context.rect(x,y,w,h)；绘制矩形，x和y是矩形左上角的坐标位置，w是矩形的宽度，h是矩形的高度。

context.rect(100,100,200,100);

了解：贝塞尔曲线
定义画布的大小是style的属性，而定义画布的像素，是canvas特有的width，height属性。

<script>
    window.onload = function(){
        //画布
        var canvas = document.getElementById("canvas");
        canvas.width = 500;
        canvas.height = 500;
        //画笔
        var context = canvas.getContext("2d");//目前只有2d这个属性
    }
</script>

canvas是内联元素。
画第一笔：

context.moveTo(100,200);//移动原点，起始位置
context.lineTo(50,300);//目标位置
context.lineWidth = 10;//画笔的粗细
context.strokeStyle = "red";//画笔的样式
context.stroke();//开始画调用前面所有，必须放在最后

画第二笔：

context.beginPath();//开始新的一笔
context.moveTo(200,200);
context.lineTo(150,300);
context.lineTo(200,400);
context.lineWidth = 5;
context.strokeStyle = "pink";
context.stroke();

画圆的方法：context.arc（圆心X，圆心Y，半径，起始角度，目标角度，画的方向[true,false]）

context.arc(200,200,100,0,1/2*Math.PI,true);//true逆时针画，默认顺时针