Canvas绘图 （html5新增特性）

• Canvas

使用<canvas>对象,需要设置属性：width，height。指定绘图的区域大小。在canvas标签前后出现的信息将在不支持<canvas>元素的浏览器中显示出来。如下：

<canvas id="drawing" width="400" height="400">a drawing of something</canvas>

要在这块画布上绘图，需要取得绘图上下文。取得绘图上下文对象的引用需要调用getContext()方法并传入上下文的名字。传入“2d” 取得2D上下文对象。

 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
 <script type="text/javascript">
     var drawing=document.getElementById("drawing");
     if(drawing.getContext){     //检测获取绘图上下文对象的方法是否存在
         var context=drawing.getContext("2d");

     }
 </script>

要导出<canvas>元素上绘制的图像，可使用toDataURL()方法。参数为图像的类型格式

 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
 <script type="text/javascript">
     var drawing=document.getElementById("drawing");
     if(drawing.getContext){
         var imgURL=drawing.toDataURL("image/png");
         var image=document.createElement("img");
         image.src=imgURL;
         document.body.appendChild(image);

     }
 </script>

•  2D上下文

坐标开始于<canvas>元素的左上角，绘制简单的2D图形。

操作大多分为描边和填充两个操作，属性为：fillStyle（填充），strokeStyle（描边）.

• 绘制矩形（相关的方法：fillRect()，strokeRect()，clearRect() 清除画布上的矩形区域）

 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
 <script type="text/javascript">
     var drawing=document.getElementById("drawing");
     if(drawing.getContext){
         /*var imgURL=drawing.toDataURL("image/png");
         var image=document.createElement("img");
         image.src=imgURL;
         document.body.appendChild(image);*/
         var context=drawing.getContext("2d");
         context.fillStyle="red";
         context.fillRect(10,10,50,50);
         context.fillStyle="rgba(0,0,255,0.5)";
         context.fillRect(30,30,50,50);

     }
 </script>

• 画布上绘制路径：首先调用beginPath()方法，表示要开始绘制新路径，然后调用方法： arc(),arcTo(),lineTo(),moveTo(),quadraticCurveTo(),rect(),             最后创建路径后选择：closePath()方法，fill()，stroke()。

绘制时钟：

 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
 <script type="text/javascript">
     var drawing=document.getElementById("drawing");
     if(drawing.getContext){
         var context=drawing.getContext("2d");
         context.beginPath();
         //绘制外圆
         context.arc(100,100,99,0,2*Math.PI,false);
         //绘制内圆
         context.moveTo(194,100);
         context.arc(100,100,94,0,2*Math.PI,false);
         //绘制分针
         context.moveTo(100,100);
         context.lineTo(100,15);
         //绘制时针
         context.moveTo(100,100);
         context.lineTo(35,100);
         //描边
         context.stroke();
     }
 </script>

• 绘制文本：fillText()和strokeText()   四个参数：要绘制的文本字符，x坐标，y坐标，可选最大像素宽度。 属性：font（文本样式，大小，字体），textAlign（文本对齐方式），textBaseline（文本的基线）.

         context.font="bold 14px Arial";
         context.textAlign="center";
         context.textBaseline="middle";
         context.fillText("12",100,20);

变换：rotate()围绕圆点旋转角度，scale()缩放一定比例,translate()平移，transform，setTransform。

• 绘制图像：把图像绘制到画布上，drawImage()方法。

         var img=document.images[0];
         context.drawImage(img,100,100);

• 阴影

shadowColor:阴影颜色。

shadowOffsetX:形状或路径x轴方向的阴影偏移量。

shadowOffsetX:形状或路径y轴方向的阴影偏移量。

shadowBlur：模糊像素数。

这些属性通过context对象来修改。在绘制之前设置完成，能自动产生阴影。