最近在学习HTML5 Canvas，这里记录一些基础方法的总结：

HTML5中的canvas元素是作为2D渲染上下文的包装器，它包含绘图的图形操作所需要的全部方法和功能。

· 访问2D渲染上下文：

   var canvas = $('#Canvas');

   var context = canvas.get(0).getContext("2d");

· 绘制矩形并填充颜色：

   context.fillStyle = "rgb(255, 0, 0)";

   该方法设置填充的颜色，赋值可以是任何有效的CSS颜色值；

   context.fillRect(0, 0, 100, 100);

   该方法接收四个参数：前两个参数是原点（左上角）的（x，y）坐标值，后两个参数是矩形的宽度和高度；

· 绘制矩形边框：

   context.strokeRect(0, 0, 100, 100);

   参数设置与fillRect()方法一样；

· 绘制线条：

   context.beginPath();    //开始路径

   context.moveTo(10, 10);    //设置路径原点

   context.lineTo(100, 10);    //设置路径终点

   context.closePath();    //结束路径    

   context.stroke();    //绘制路径轮廓

· 绘制圆形：

   context.beginPath();    //开始路径

   context.arc(100, 100, 50, 0, Math.PI*2, false);

   context.closePath();    //结束路径

   context.fill();    //填充路径

   该方法接收六个参数：前两个为原点坐标，第三个参数为半径大小，第四个参数为开始角度，第五个参数为结束角度，第六个参数为绘制方向（逆时针为true，顺时针为false）；

· 清除canvas：

   context.clearRect(0, 0, 100, 100);

   该方法参数设置和fillRect相同，表示擦除的矩形区域；

· 保存绘图状态：

   context.save();

· 恢复绘图状态：

   context.restore();

· 平移：

   context.translate(100, 100);

   该方法接收两个参数，为平移坐标，表示把2D渲染上下文的原点移动多远（即加上原点的坐标）；

· 缩放：

   context.scale(2, 2);

   该方法接收两个参数，分别为x，y方向的缩放倍数；

· 旋转：

   context.rotate(Math.Pi/4);

   该方法是把2D渲染上下文绕其原点进行旋转指定的弧度。