用Canvas绘制自己的时钟

这次我通过用Canvas实现一个时钟来，学习Canvas绘图的基本API和用法，对于例子里面用到的每一个API，我都会详细的列出它的用法。

首先来看一下绘制完成后的效果图

时钟.PNG

这个时钟可以通过调整画布的宽高来增大和缩小，效果不会有改变。

绘制的基本思路是

• 时钟背景图的绘制
• 时针、分针、秒针、原点的绘制
• 让时针、分针、秒针动起来

时钟背景图的绘制

首先在HTML中定义一个宽高为400的画布Canvas

<div>
       <canvas id="clock" height="400" width="400"></canvas>
   </div>

然后获取画布元素，定义画布的执行上下文ctx

/*获取画布元素*/
var dom = document.getElementById("clock");
/*获得2d执行环境*/
var ctx = dom.getContext('2d');

获取画布的宽高,以及定义时钟的半径

/*定义半径为宽度的一半*/
var r = width/2;
/*缩放比例*/
var rem = width / 200;

接下来进行背景图的绘制，包括背景圆，12个数字，还有60个点的绘制，代码如下，注释已经详细说明了过程

/*画时钟的背景图*/
function drawBackground(){
    /*一开始先把画布的初始状态保存下来*/
    ctx.save();
    /*将画布的中心原点由(0,0)变成(r,r)*/
    ctx.translate(r,r);
    /*开始绘画*/
    ctx.beginPath();
    /*定义画笔的宽度*/
    ctx.lineWidth = 10*rem;
    /*绘制一个圆*/
    ctx.arc(0,0,r-5*rem,0,2*Math.PI,false);
    /*进行填充*/
    ctx.stroke();
    /*画时钟上的12个数字*/
    var hourNumber = [3,4,5,6,7,8,9,10,11,12,1,2];//12个小时数
    ctx.font = 18*rem +'px Arial';//定义字体大小和样式
    ctx.textAlign='center';//将文本内容居中对齐
    ctx.textBaseline='middle';//将文本基线设置为中线
    hourNumber.forEach(function(number,i){
        var rad = 2*Math.PI/12*i;//每个数字的弧度
        /*求出数字存放位置的x和y坐标*/
        var x = Math.cos(rad)*(r - 30*rem);
        var y = Math.sin(rad)*(r - 30*rem);
        /*填充数字*/
        ctx.fillText(number,x,y);
    });
    /*绘制60个点*/
    for(var i=0;i<60;i++){
        var rad = 2*Math.PI/60*i;
        var x = Math.cos(rad)*(r-18*rem);
        var y = Math.sin(rad)*(r-18*rem);
        ctx.beginPath();
        /*如果是小时数的位置就绘制成黑色*/
        if(i % 5 === 0){
            ctx.fillStyle = "#000";
            ctx.arc(x,y,2*rem,0,2 * Math.PI,false);
        }else{
            ctx.fillStyle = "#ccc";
            ctx.arc(x,y,2*rem,0,2 * Math.PI,false);
        }
        ctx.fill();
    }
}

时针、分针、秒针、圆点的绘制

代码如下

function drawHour(hour,minute){
    /*再次保存当前画布的状态*/
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 12 * hour;
    var mrad = 2 * Math.PI / 12 /60 * minute;
    ctx.rotate(rad+mrad);//旋转当前绘画
    ctx.lineWidth = 6*rem;
    ctx.lineCap = 'round';
    ctx.moveTo(0,10*rem);
    ctx.lineTo(0,-r/2);
    ctx.stroke();
    /*返回最近的一次SAVE的画布状态*/
    ctx.restore();
}
function drawMinute(minute){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * minute;
    ctx.rotate(rad);
    ctx.lineWidth = 3*rem;
    ctx.lineCap = 'round';
    ctx.moveTo(0,10*rem);
    ctx.lineTo(0,-r + 40*rem);
    ctx.stroke();
    ctx.restore();
}
function drawSecond(second){
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle = "#c14543";
    var rad = 2 * Math.PI / 60 * second;
    ctx.rotate(rad);
    ctx.moveTo(-3,20*rem);
    ctx.lineTo(3,20*rem);
    ctx.lineTo(1,-r+18*rem);
    ctx.lineTo(-1,-r+18*rem);
    ctx.fill();
    ctx.restore();
}
function drawDot(){
    ctx.beginPath();
    ctx.fillStyle="#fff";
    ctx.arc(0,0,3*rem,0,2*Math.PI,false);
    ctx.fill();
}

让时钟动起来

function draw(){
    /*动态改变的时候，每一次都要先将之前的矩形画布清除掉，然后重新绘制*/
    ctx.clearRect(0,0,width,height);
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    drawBackground(width);//背景
    drawHour(hour,minute);//小时
    drawMinute(minute);//分钟
    drawSecond(second);//秒
    drawDot();//中心原点
    /*恢复到一开始save的那个画布状态，进行重新绘制*/
    ctx.restore();
}
draw();
setInterval(draw,1000);