利用 html5 canvas 完成一个实时时钟 demo

最新推荐文章于 2023-01-02 18:52:41 发布

老鱼头cc

最新推荐文章于 2023-01-02 18:52:41 发布

阅读量169

点赞数

文章标签： html5 javascript css css3

本文链接：https://blog.csdn.net/laoyutoucc/article/details/107586748

版权

利用canvas实现一个实时时钟动画

效果
在这里插入图片描述

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="mycanvas" width=" 400" height="400"></canvas>
    <script>
        var mycarvas = document.querySelector('#mycanvas')
        //获取上下文（绘画环境）
        var ctx = mycanvas.getContext("2d");
        (function play () {
            //清除上一次
            ctx.clearRect(0,0,mycanvas.width,mycanvas.height)
            //保存
            ctx.save()
            //确定中心点
            ctx.translate(mycanvas.width/2,mycanvas.height/2);
            biaopan ()
            run ()
            //还原
            ctx.restore()
            requestAnimationFrame(play)
        })()
        //绘制静态
        function biaopan () {
        	//绘制表盘
            ctx.strokeStyle = '#777'
            ctx.lineWidth = 6;
            //初始化路径
            ctx.beginPath()
            //画圆
            ctx.arc(0,0,150,0,2*Math.PI)
            ctx.stroke()
            //分针刻度
            ctx.strokeStyle = '#ccc'
            ctx.lineWidth = 2
            for(var i = 0;i<60;i++){
                ctx.beginPath()
                ctx.moveTo(0,-130)
                ctx.lineTo(0,-140)
                ctx.stroke()
                ctx.rotate(2*Math.PI/60)
            }
            //时针刻度 
            ctx.strokeStyle = '#17f'
            ctx.lineWidth = 6
            for(var i = 0;i<12;i++){
                ctx.beginPath()
                ctx.moveTo(0,-120)
                ctx.lineTo(0,-140)
                ctx.stroke()
                ctx.rotate(2*Math.PI/12)
            }
            //数字
            ctx.textAlign = 'center'
            ctx.textBaseline = 'middle'
            ctx.fillStyle = 'green'
            ctx.font = '20px 微软雅黑'
            for(var i=1; i<13;i++) {
                ctx.fillText(i,Math.sin(2*Math.PI/12*i)*100,Math.cos(2*Math.PI/12*i)*-100)
            }
        }
        //绘制动态
        function run () {
            //得到现在时间
            var d = new Date()
            var h = d.getHours()
            var m = d.getMinutes()
            var s = d.getSeconds()
            
            //时针
            ctx.save()
            //分针走60小格，时针走5小格，分针12格，时针1格
            ctx.rotate(2*Math.PI/12*h+(2*Math.PI/60*m+2*Math.PI/60*s/60)/12)
            ctx.strokeStyle = 'blue'
            ctx.lineWidth = 8
            ctx.beginPath()
            ctx.moveTo(0,18)
            ctx.lineTo(0,-60)
            ctx.stroke()
            ctx.restore()
            //分针
            ctx.save()
            //秒针走60格，分针走一格
            ctx.rotate(2*Math.PI/60*m+2*Math.PI/60*s/60)
            ctx.strokeStyle = '#f71'
            ctx.lineWidth = 4
            ctx.beginPath()
            ctx.moveTo(0,20)
            ctx.lineTo(0,-100)
            ctx.stroke()
            ctx.restore()
            //秒针
            ctx.save()
            ctx.rotate(2*Math.PI/60*s)
            ctx.strokeStyle = '#f00'
            ctx.lineWidth = 4
            ctx.beginPath()
            ctx.moveTo(0,20)
            ctx.lineTo(0,-110)
            ctx.stroke()
            ctx.restore()
            //中心圆
            ctx.fillStyle = '#777'
            ctx.beginPath()
            ctx.arc(0,0,10,0,2*Math.PI)
            ctx.fill()
        }
        
    </script>
</body>
</html>