canvas时钟

最新推荐文章于 2024-07-30 10:56:44 发布

Liveuol

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量57

点赞数

分类专栏： javascript 文章标签： html5 javascript

本文链接：https://blog.csdn.net/m0_50855143/article/details/120518048

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图

代码如下：

<body>
    <canvas id="mycanvas" width="500" height="500" style="border: 1px solid #000;background-color: pink;"></canvas>
    <script>
        var mycanvas = document.getElementById("mycanvas");
        var context = mycanvas.getContext("2d");
        function drawClock(){
            context.clearRect(0,0,500,500);
            //获取当前时间
            var now = new Date();
            var second = now.getSeconds();
            var minute = now.getMinutes();
            var hour0 = now.getHours();
            //将24小时制转化成12小时制
            var hour = hour0 + minute/60;
            hour = hour>12?hour-12:hour;
            //表盘
            context.beginPath();
            context.lineWidth = 8;
            var grad = context.createLinearGradient(0,0,500,0);
            grad.addColorStop(0,"pink");
            grad.addColorStop(.5,"skyblue");
            grad.addColorStop(1,"plum");
            context.strokeStyle = grad;
            context.arc(250,250,200,0,Math.PI*2);
            context.stroke();
            context.closePath();
            //时刻度
            for(var i = 0;i < 12;i++) {
                context.save();
                context.lineWidth = 8;
                context.strokeStyle = "black";
                //以画布为中心
                context.translate(250,250);
                context.rotate(i * 30 * Math.PI/180);
                context.beginPath();
                context.moveTo(0,-180);
                context.lineTo(0,-196);
                context.closePath();
                context.stroke()
                context.restore();
            }
            //分刻度
            for(var i = 0;i < 60;i++) {
                context.save();
                context.lineWidth = 5;
                context.strokeStyle = "black";
                //以画布为中心
                context.translate(250,250);
                context.rotate(i * 6 * Math.PI/180);
                context.beginPath();
                context.moveTo(0,-188);
                context.lineTo(0,-196);
                context.closePath();
                context.stroke()
                context.restore();
            }
            //数字
            for(var j = 0;j < 12;j++) {
                context.save();
                context.font = '16px Arial';
                context.lineWidth = 5;
                var arr = [3,4,5,6,7,8,9,10,11,12,1,2];
                context.translate(250,250);
                context.textAlign = "center";
                context.textBaseline = "middle";
                //这是第一种写法
                // context.translate(242,254);
                // var theta = (j - 3) * (Math.PI * 2) / 12;
                // var x = 200 *0.85* Math.cos(theta);
                // var y = 200 *0.85* Math.sin(theta);
                //这是第二种写法 （推荐写法）
                var x = 170 * Math.cos(Math.PI/6 *j);
                var y = 170 * Math.sin(Math.PI/6 *j);
                context.fillText(arr[j],x,y);
                context.restore();
            }
            //表盘中心
            context.beginPath();
            context.lineWidth = 3;
            context.strokeStyle = "black";
            context.fillStyle = "black";
            context.arc(250,250,4,0,Math.PI*2);
            context.fill();
            context.closePath();
            //针轴
            //时针轴
            context.save();
            context.lineWidth = 3;
            context.strokeStyle = "black";
            context.translate(250,250);
            context.rotate(hour*30*Math.PI/180);
            context.beginPath();
            context.moveTo(0,-80);
            context.lineTo(0,0);
            context.stroke();
            context.closePath();
            context.restore();
            //分针轴
            context.save();
            context.lineWidth = 3;
            context.strokeStyle = "black";
            context.translate(250,250);
            context.rotate(minute*6*Math.PI/180);
            context.beginPath();
            context.moveTo(0,-110);
            context.lineTo(0,0);
            context.stroke();
            context.closePath();
            context.restore();
            //秒针轴
            context.save();
            context.lineWidth = 3;
            context.strokeStyle = "orange";
            context.translate(250,250);
            context.rotate(second*6*Math.PI/180);
            context.beginPath();
            context.moveTo(0,-130);
            context.lineTo(0,0);
            context.stroke();
            context.closePath();
            context.restore();

        }
        drawClock();//开始就调用，可以防止有一秒的延迟
        setInterval(drawClock,1000)
    </script>
</body>

冲冲冲！！！

Liveuol

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas时钟

效果图代码如下：<body> <canvas id="mycanvas" width="500" height="500" style="border: 1px solid #000;background-color: pink;"></canvas> <script> var mycanvas = document.getElementById("mycanvas"); var context .
复制链接

扫一扫