HTML5 canvas画布
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); 移动画笔的位置,后面带两个参数
context.moveTo(100,200); //移动画笔的起点位置
4.3 lineTo(x,y); 画一条线，参数是直线的终点位置
context.lineTo(50,300); //移动画笔的终点位置
和线条相关的属性：
lineWidth:线条的宽度
strokeStyle:线条的颜色
4.4 stroke(): 绘制线条
context.stroke(); //开始画
4.5 closePath();关闭路径，也就是回到起始点
ctx.closePath(); //回到起始点
4.6 fillStyle：属性，设置填充的样式，一般写填充颜色就好了
ctx.fillStyle = "yellow";
4.7 fill(); 完成填充操作
ctx.fill();
4.8 beginPath();开始一个新的路径或者冲着这个路径
ctx.beginPath();//重新开始新的路径
4.9 context.arc(x,y,r,start,end,direction);绘制一个弧,前面两个参数是圆点的坐标，第三个参数是半径，第四个参数start是起始的弧度，第五个参数end是结束的弧度，第六个参数direction是绘制的方向，默认是false（顺时针方向）。True是（逆时针方向）
context.arc(200,200,100,0,1/2*Math.PI ,true);//true是逆时针画，从三点钟方向开始
4.10 context.rect( x,y,w,h);绘制矩形，（x,y）是矩形左上角的坐标位置。W是矩形的宽度，h是矩形的高度
context.fillRect(200,200,100,50);
context.fillRect(200,200,100,50);
context.rect(400,400,100,60);
context.fill();
定义画布的大小是style属性，而定义画布的像素是canvas特有的属性来决定的
画布的大小和画布的像素，名字和大小是相同的，但是其功能是不一样的
var vanvas = document.getElementById("canvas");
canvas.width = 500; //画布的像素
canvas.height= 500; //画布的像素
var context = canvas.getContext("2b"); //画布的画笔
这四个步骤是我们作画之前必须要写的
canvas是内联元素
context.moveTo(100,300); //移动画笔的起点位置
context.lineTo(50,300); //移动画笔的终点位置
context.lineWidth = 10; //画笔的粗细
context.strokeStyle = "red"; //画笔的颜色
context.stroke(); //开始画
画圆：
context.arc(200,200,100,0,1/2*Math.PI ,true);//true是逆时针画，从三点钟方向开始
参数：（圆心x,圆心y,半径r,起始角度，目标角度，画的方向[可选] 默认顺时针）false