Canvas实例——绘制时钟

最近正在学习h5的canvas元素，并看到一个很好的例子，在这里总结后分享给大家。首先canvas是h5中新增的元素，使用canvas可以在页面上绘制出任何需要的、非常漂亮的图片和图像，制作出丰富多彩的web页面。知道Canvas作用后，下面就来介绍这个例子，效果图如下：

首先我们定义canvas元素作为画布，大小设定为300*300px，代码如下：

<div class="box">
    <canvas id="canvas" width="300px" height="300px"></canvas>
</div>

接下来介绍的主要是 JavaScript代码，我们通过getElementById()方法获取该canvas元素，代码如下：

var canvas = document.getElementById("canvas");//通过id获取canvas元素
    var ctx = canvas.getContext('2d');

我们在这里先设置图形的组合方式是destination-over，即为原有图形之下绘制图形，主要为了后面加入劳力士图标的图片，代码如下：

ctx.globalCompositeOperation='destination-over';

为了使时钟能够动起来，我们使用js里的固有方法setInterval方法用于设置动画的时间间隔，1000即为一秒。

setInterval(run,1000);

实例化时间对象，获取系统的时分秒，代码如下：

var time = new Date();//获取现在时间
        var sec = time.getSeconds();//获取秒
        var min = time.getMinutes();//获取分钟
        var hour = time.getHours();//获取小时
        hour = hour>12 ? hour-12 : hour;

接下来我们绘制时间间隔，代码如下，需要特别说明的是save()和restore()方法，它们分别是用来保存和恢复canvas状态的，在需要保存与恢复当前状态时，首先调用save方法将当前状态保存到栈中，在完成设置的操作后，再调用restore从栈中取出之前保存的图形上下文的状态进行恢复。关于save()和restore()具体定义和用法，请点击这里查看，绘制时间间隔代码如下：

ctx.clearRect(0,0,300,300);//清除画布
        ctx.save();
        ctx.translate(150,150);//x平移+150,y平移+150
        for(var i=0; i<60; i++){//绘制时间间隔，每隔5个绘制大的，其他绘制小的
            if(i%5 == 0){
                ctx.beginPath();
                ctx.moveTo(0,120);
                ctx.lineTo(0,130);
                ctx.lineWidth = 5;
                ctx.strokeStyle = "#000010";
                ctx.stroke();
                ctx.rotate(Math.PI/30);
            }else{
                ctx.beginPath();
                ctx.moveTo(0,120);
                ctx.lineTo(0,126);
                ctx.lineWidth = 1;
                ctx.strokeStyle = "#000000";
                ctx.stroke();
                ctx.rotate(Math.PI/30);
            }

        }
        ctx.restore();

绘好时间间隔之后，我们加入绘制劳力士的图标，其实就是绘制图片，代码如下：

ctx.save();
        var image= new Image();
        image.src="lls.jpg";
        image.onload = function () {
            drawImg(ctx,image);
        };
function drawImg(context,image) {
        context.drawImage(image,111,170,80,45);
    }

最后我们添加时钟的指针，分别是秒指针、分指针、时指针，代码如下：

   //秒针
        ctx.save();
        ctx.translate(150,150);
        ctx.rotate(sec*Math.PI/30);//每一秒旋转6度
        ctx.beginPath();
        ctx.moveTo(0,30);
        ctx.lineTo(0,-120);
        ctx.lineWidth = 1;
        ctx.strokeStyle = "black";
        ctx.stroke();
        ctx.restore();
        //分针
        ctx.save();
        ctx.translate(150,150);
        ctx.rotate(sec*Math.PI/1800 + min*Math.PI/30);//每一秒再分60分，秒针走一刻度，分针要走1/60刻度,sec*(6*Math.PI/180)/60
        ctx.beginPath();
        ctx.moveTo(0,20);
        ctx.lineTo(0,-100);
        ctx.lineWidth = 2;
        ctx.strokeStyle = "black";
        ctx.stroke();
        ctx.restore();
        //时针
        ctx.save();
        ctx.translate(150,150);
        ctx.rotate(min*Math.PI/360 + hour*Math.PI/6);//每一小时走过5个刻度线,60分钟,30deg，分成60份,30deg/60
        ctx.beginPath();
        ctx.moveTo(0,10);
        ctx.lineTo(0,-80);
        ctx.lineWidth = 3;
        ctx.strokeStyle = "black";
        ctx.stroke();
        ctx.restore();
        //给时钟加入灰色边框
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth=3;
        ctx.strokeStyle="gray"
        ctx.arc(150,150,130,0,Math.PI*2,true);
        ctx.stroke();
        ctx.restore();
    }

放上该项目git地址https://github.com/LJWLgl/WebDemo，如果有需要，可以去下载。