- 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对象来修改。在绘制之前设置完成，能自动产生阴影。
Canvas绘图 ??（html5新增特性）
原文地址：https://www.cnblogs.com/alaner/p/9525291.html