canvas基础（一）

基本用法：

1 <canvas id="myCanvas" width="200" height="200">该浏览器不支持canvas</canvas>
2 var context = myCanvas.getContext("2d");　 //获取绘图上下文

填充和描边：

1 context.fillStyle = "red";     //填充颜色
2 context.strokStyle = "red";    //描边颜色

绘制矩形：

 1 //填充矩形
 2 context.fillStyle = "red";  
 3 context.fillRect(0, 0, 50, 50); 
 4 
 5 //描边矩形
 6 context.strokeStyle = "red";  
 7 context.strokeRect(0, 0, 50, 50); 
 8 
 9 //清除画布上的矩形区域
10 context.clearRect(0, 0,10000, 10000); 

 绘制路径：注：绘制路径前后需要调用beginPath()与closePath()方法

 1 //将绘图游标移到(x, y)，不画线
 2 moveTo(x, y);
 3 
 4 //从上一点绘制一条直线，直到(x, y)为止
 5 lineTo(x, y);
 6 
 7 //从(x, y)开始绘制一个矩形
 8 rect(x, y, width, height);
 9 
10 //以点(x, y)为圆心绘制圆弧，最后一个参数默认逆时针
11 arc(x, y, radius, startAngle, endAngle, counterclockwise);
12 
13 //从上一点绘制一条圆弧到点(x2, y2)，并且以给定的半径穿过(x1, y1)
14 arcTo(x1, y1, x2, y2, radius);
15 
16 //从上一点绘制一条曲线到点(x, y）为止，并且以（cx, cy）为控制点
17 quadraticCurveTo(cx, cy, x, y);
18 
19 //从上一点绘制一条曲线到点(x, y）为止，并且以（c1x, c1y）与(c2x, c2y)为控制点
20 bezierCurveTo(c1x, c1y, c2x,c2y, x, y);