js+canvas实现时钟动画效果(附详细注释)

本篇文章给大家介绍一些js+canvas实现时钟动画效果,代码中附有详细注释。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

效果图:

1.gif

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>时钟特效</title>
</head>
<body>
    <canvas width="150" height="150" id="canvas"></canvas>
</body>
</html>
<script>
    clock();// 显示
    setInterval(clock,1000);// 每一秒重绘一次,达到转动效果
    function clock(){
        var now = new Date();// 得到当前日期与时间
        var second = now.getSeconds(),
            min = now.getMinutes(),
            hour = now.getHours();// 得到时分秒
            hour = hour > 12?hour-12:hour;
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,150,150);// 初始化画布
        ctx.save();
        ctx.translate(75,75);// 平移坐标原点
        ctx.scale(0.4,0.4);//缩放效果
        ctx.rotate(-Math.PI/2);// 将x轴旋转-90
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 8;
        ctx.lineCap = 'round';

        // 显示时针刻度
        ctx.save();
        ctx.beginPath();
        for(var i = 0;i<12;i++)
        {
            ctx.rotate(Math.PI/6);
            ctx.moveTo(100,0);
            ctx.lineTo(120,0);
        }
        ctx.stroke();
        ctx.closePath();
        ctx.restore();// 恢复
        ctx.save();
        
        // 显示秒针刻度
        ctx.beginPath();
        ctx.lineWidth = 5;
        for(var  i = 0;i < 60; i++)
        {
            if(i % 5 != 0)
            {
                ctx.moveTo(117,0);
                ctx.lineTo(120,0);
            }
            ctx.rotate(Math.PI/30);// 转6度
        }
        ctx.stroke();
        ctx.closePath();
        ctx.restore();// 恢复
        ctx.save();

        // 绘制时针
        ctx.beginPath();
        ctx.rotate((Math.PI / 6)*hour + (Math.PI/360)*min + (Math.PI /21600)*second)//时针当前指向的位置
        ctx.lineWidth = 14;
        ctx.moveTo(-20,0);
        ctx.lineTo(75,0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();//恢复
        ctx.save();

        // 绘制分针
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 10;
        ctx.rotate((Math.PI/30)*min + (Math.PI/1800)*second);// 分针当前的位置
        ctx.moveTo(-28,0);
        ctx.lineTo(102,0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();//恢复
        ctx.save();


        // 绘制秒针
        ctx.beginPath();
        ctx.rotate(Math.PI/30*second);
        ctx.strokeStyle = '#D40000';
        ctx.lineWidth = 6;
        ctx.moveTo(-30,0);
        ctx.lineTo(83,0);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();//恢复
        ctx.save();

        //绘制表框
        ctx.beginPath();
        ctx.lineWidth = 4;
        ctx.strokeStyle = '#325Fa2';
        ctx.arc(0,0,142,0,Math.PI*2,true);//半径142
        ctx.stroke();
        ctx.closePath();
        ctx.restore()//恢复
        ctx.restore()//恢复


    }
</script>

更多web前端知识,请查阅 HTML中文网 !!

以上就是js+canvas实现时钟动画效果(附详细注释)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏