最近在学习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渲染上下文绕其原点进行旋转指定的弧度。