Canvas绘图 （html5新增特性）

• Canvas

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

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

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

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

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

 1 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
 2 <script type="text/javascript">
 3     var drawing=document.getElementById("drawing");
 4     if(drawing.getContext){
 5         var imgURL=drawing.toDataURL("image/png");
 6         var image=document.createElement("img");
 7         image.src=imgURL;
 8         document.body.appendChild(image);
 9
10     }
11 </script>

•  2D上下文

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

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

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

 1 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
 2 <script type="text/javascript">
 3     var drawing=document.getElementById("drawing");
 4     if(drawing.getContext){
 5         /*var imgURL=drawing.toDataURL("image/png");
 6         var image=document.createElement("img");
 7         image.src=imgURL;
 8         document.body.appendChild(image);*/
 9         var context=drawing.getContext("2d");
10         context.fillStyle="red";
11         context.fillRect(10,10,50,50);
12         context.fillStyle="rgba(0,0,255,0.5)";
13         context.fillRect(30,30,50,50);
14
15
16     }
17 </script>

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

绘制时钟：

 1 <canvas id="drawing" width="400" height="400">a drawing of something</canvas>
 2 <script type="text/javascript">
 3     var drawing=document.getElementById("drawing");
 4     if(drawing.getContext){
 5         var context=drawing.getContext("2d");
 6         context.beginPath();
 7         //绘制外圆
 8         context.arc(100,100,99,0,2*Math.PI,false);
 9         //绘制内圆
10         context.moveTo(194,100);
11         context.arc(100,100,94,0,2*Math.PI,false);
12         //绘制分针
13         context.moveTo(100,100);
14         context.lineTo(100,15);
15         //绘制时针
16         context.moveTo(100,100);
17         context.lineTo(35,100);
18         //描边
19         context.stroke();
20     }
21 </script>

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

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

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

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

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

• 阴影

shadowColor:阴影颜色。

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

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

shadowBlur：模糊像素数。

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

原文地址：https://www.cnblogs.com/alaner/p/9525291.html