HTML新增<canvas>标签,并提供一组 JavaScript API，使得开发人员可以便捷的动态创建图形和图像。
创建2D 时钟图像 ：
<canvas id="canvasImg" width="200" height="200" >2D图像绘制</canvas>
var Ele_canvas=document.getElementById("canvasImg"); if(Ele_canvas.getContext){ /* 买根2B铅笔 */ var context_2B=Ele_canvas.getContext('2d'); /* 选好颜色*/ context_2B.strokeStyle="rgba(0,0,250,0.6)"; /* 削铅笔 */ context_2B.lineWidth=1; context_2B.lineCap='round'; context_2B.lineJoin='bevel'; /* 开始画画 */ context_2B.beginPath(); //绘制路径，素描，不是水墨，也不是油彩刷 context_2B.arc(100,100,99,0,2*Math.PI,false); //画一圆形 context_2B.moveTo(195,100); //笔往里边挪一点，准备画第二笔,否则 两个图有交集部分 context_2B.arc(100,100,95,0,2*Math.PI,true); //第二笔，又是一圆 context_2B.translate(100,100); //context_2B.rotate(1); context_2B.translate(-100,-100); context_2B.moveTo(100,100); //又挪一点 context_2B.lineTo(100,33); //画一直线,minute context_2B.moveTo(100,100); //挪回来 context_2B.lineTo(155,100); //又一直线,hour context_2B.stroke(); //画完了,应该是默认调用了closePath(); /* 贴一些数字上去 */ context_2B.font="bold 12px Arial"; //文本字体及样式 context_2B.textAlign='center'; //位于参照点位置 左右 context_2B.textBaseline='middle'; //位于参照点位置 上下 context_2B.fillText('12',100,15); //实心 context_2B.strokeText('3',185,100); //空心
斜体描红部分是进行起始点位置转换，可不用考虑。