canvas基础（一）

获取元素与画笔：

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

开启与关闭路径：

ctx.beginPath();
ctx.closePath();

填充和描边颜色：

 ctx.fillStyle = "red";     //填充颜色
 ctx.strokStyle = "red";    //描边颜色

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

 //将绘图游标移到(x, y)，不画线
 moveTo(x, y);

 //从上一点绘制一条直线，直到(x, y)为止
 lineTo(x, y);

 //从(x, y)开始绘制一个矩形
 rect(x, y, width, height);

 //以点(x, y)为圆心绘制圆弧，最后一个参数默认逆时针
 arc(x, y, radius, startAngle, endAngle, counterclockwise);

 //从上一点绘制一条圆弧到点(x2, y2)，并且以给定的半径穿过(x1, y1)
 arcTo(x1, y1, x2, y2, radius);

 //从上一点绘制一条曲线到点(x, y）为止，并且以（cx, cy）为控制点
 quadraticCurveTo(cx, cy, x, y);

 //从上一点绘制一条曲线到点(x, y）为止，并且以（c1x, c1y）与(c2x, c2y)为控制点
 bezierCurveTo(c1x, c1y, c2x,c2y, x, y);

绘制矩形

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