Canvas

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);     //空心

斜体描红部分是进行起始点位置转换，可不用考虑。