canvas画布时钟。

最新推荐文章于 2021-11-04 11:33:02 发布

Waghhhh

最新推荐文章于 2021-11-04 11:33:02 发布

阅读量124

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/Waghhhh/article/details/120288241

版权

本文介绍了如何使用JavaScript在HTML5 canvas上创建一个模拟的钟表，包括圆盘绘制、刻度标记、以及根据当前时间动态更新时针、分针和秒针的位置。通过定时器实现每秒刷新一次，展示了基础的前端动画技术。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
             // 获取画布
             var canvas=document.querySelector('canvas');
            // 获取上下文 
            var context=canvas.getContext('2d');
            // 绘制圆盘
            function clock(){
            context.beginPath();
            context.arc(300,300,200,0,Math.PI*2);
            context.fillStyle='pink'
            context.fill();
            context.closePath();
            // 绘制时刻度
            for(i=0;i<12;i++){
                context.save();
                context.translate(300,300);
                context.rotate(i*(Math.PI/6))
                context.beginPath();
                context.moveTo(0,-180);
                context.lineTo(0,-200);
                context.closePath();
                context.lineWidth=4;
                context.fillStyle='black';
                context.rotate(Math.PI/6);
                context.font='16px bold'
                context.fillText(i+1,-5,-220)
                context.stroke();
                context.restore();
            }
            // 绘制分刻度
            for(i=0;i<60;i++){
                context.save();
                context.translate(300,300);
                context.beginPath();
                context.rotate(i*(Math.PI/30))
                context.moveTo(0,-190);
                context.lineTo(0,-200);
                context.stroke();
                context.closePath();
                context.restore();
            }
            // 获取当前时间
            var today=new Date();
            var hour=today.getHours();
            var min=today.getMinutes();
            var sec=today.getSeconds();
            // 
            hour=hour+min/60;

            // 绘制时针
            context.lineWidth=4
            context.save();
            context.translate(300,300);
            context.rotate(hour*Math.PI/3);
            context.beginPath();
            context.moveTo(0,10)
            context.lineTo(0,-100);
            context.stroke()
            context.closePath();
            context.restore();
            // 绘制分针
            context.lineWidth=3
            context.save();
            context.translate(300,300);
            context.rotate(min*(Math.PI/30));
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-160);
            context.stroke()
            context.closePath();
            context.restore();
            // 绘制秒针 
            context.lineWidth=2
            context.save();
            context.translate(300,300);
            context.rotate(sec*Math.PI/30);
            context.beginPath();
            context.moveTo(0,10);
            context.lineTo(0,-180);
            context.strokeStyle='red'
            context.stroke()
            context.closePath();
            context.restore();


            // 绘制交叉处
            context.lineWidth=1
            context.save();
            context.translate(300,300);
            context.beginPath();
            context.arc(0,0,5,0,Math.PI*2);
            context.fill();
            context.fillStyle='#ccc'
            context.strokeStyle='red'
            context.stroke()
            context.closePath();
            context.restore();
            }
            setInterval(clock,1000)
            clock()

        }
    </script>
</head>
<body>
    <canvas width="600px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>