- 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对象来修改。在绘制之前设置完成，能自动产生阴影。