Canvas绘制时钟效果

Cnavas绘制时钟

• 背景图的绘制（大圆、数字、小圆点），掌握基础知识：圆的绘制（arc方法），关于圆的弧度的计算，数学中关于sin cos的用法
  
  

  弧度计算分解图.png

• 时分秒针以及中心原点的绘制，其中时针和分针就是绘制一个直线即可，秒针则画一个梯形样式呈现又粗到细的效果，要掌握的基础知识：直线的绘制，旋转角度的控制（rotate以弧度为单位），时钟的动态走动效果，则用setInterval函数控制每一秒钟执行一次绘制时钟的函数。

//绘制时针
    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;
        ctx.lineCap = 'round';
        ctx.moveTo(0, 10 * rem);
        ctx.lineTo(0, -r / 2);
        ctx.stroke();
        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);
        ctx.lineTo(0, -r + 30 * rem);
        ctx.stroke();
        ctx.restore();
    }

    //绘制秒针
    function drawSecond(second) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = '#c14443';
        var rad = 2 * Math.PI / 60 * second;    //计算秒针转动的弧度
        ctx.rotate(rad);
        ctx.moveTo(-2, 20 * rem);
        ctx.lineTo(2, 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);    //每一次都要将canvas清空一下，不然秒针就会一直显示在canvas上面
        var now = new Date();   //获得当前时间
        var hour = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        drawBackground();
        drawHour(hour, minutes);
        drawMinute(minutes);
        drawSecond(seconds);
        drawDot();
        ctx.restore();
    }

    setInterval(draw, 1000);   //每秒执行一次

• 完整代码

最终结果效果图.png