新手小白包教包会的 —— canvas画时钟

最新推荐文章于 2022-11-08 00:59:02 发布

Allan_L

最新推荐文章于 2022-11-08 00:59:02 发布

阅读量279

点赞数

分类专栏：前端文章标签： canvas 时钟圆盘前端

本文链接：https://blog.csdn.net/Allan_L/article/details/80912080

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本次画时钟的几个步骤： 1. 布置静态表盘。 2. 布置数字 3.设置时分秒的指针转动速度

技术点： canvas 和 javaScript

思路：利用canvas画圆和利用 js获取时间戳，动态绘制表盘，实现时钟指针的走动。

关于canvas的简单介绍： canvas标签上要绑定宽，高； canvas的默认中心点为左上角，默认的水平方向为x轴；
这3点在之后的时钟制作中都需要知道。

下面是思路详解：

静态表盘
这部分比较简单，基本都是canvas的API。

2. 布置数字

这部分的整体思路就是：设置fillText( 文本, 坐标x, 坐标y )；（文本为：1，2，3，4...11，12）

重点是获取文本的坐标 x, y

这里，我们利用的是Math的两个API : Math.sin 正弦和 Math.cos 余弦来求得当前的文字坐标x，y （不懂sin 和 cos 可以看一下勾股定理）

因为canvas的默认圆心为左上角，所以，我们要移动圆心，分别加上宽和高的一半。

3.绘制指针

这部分就是之前说的，在一定的时间内重绘。来实现转动的效果

这里有一个clearRect（），清空给定矩形的指定像素

这里有一个地方需要注意：因为系统返回的时间是24小时制，表盘上是12小时制的，所以，是需要做一下判断的：

h > 12 ? h = h -12 : h;

这里绘制时分秒的方法是c.arc(x, y ,r , (h * 30 - 90) * Math.PI / 180, (h * 30 + 1 - 90) * Math.PI / 180, false ) );

注意：这里要 - 90度的，之前提到的，canvas的默认水平方向是X轴。

到了这里，一个简单的时钟效果就制动完成了。如果有什么好的建议希望大家指出。

如果觉得对您有帮助，那就给个赞呗。

效果图、代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
        <title>圆环</title>
    </meta>
    <style>
        #canvas {
            border: 1px solid #999;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500">您的浏览器不支持canvas</canvas>
    <script>
        const ctx = document.getElementById("canvas");
        const c = ctx.getContext('2d');
        
        //静态表盘
        function start(){
            c.beginPath();
            c.arc(250,250,240,0,360);
            c.fillStyle='#000';
            c.fill();

            let deg = 70;
            let drawPosition = 180 - deg;        
            c.beginPath();
            c.moveTo(250,250);
            c.arc(250, 250, 250, -90 * Math.PI / 180, -45 * Math.PI / 180, false);
            c.fillStyle='red';
            c.fill();

            c.beginPath();
            c.arc(250,250,230, 0, 360);
            c.fillStyle='#999';
            c.fill();
        }

        //圆心 
        function origin(){
            c.beginPath();
            c.arc(250,250,5, 0, 360);
            c.fillStyle='black';
            c.fill();
        }
//数字
        function addText(){
            var houre = [6,5,4,3,2,1,12,11,10,9,8,7];
            for (var degNum = 0;degNum < 360; degNum += 30){  //数字
                var r = ctx.width / 2 * 0.8;
                var textX = r * Math.sin((degNum) * 2 * Math.PI/360) + ctx.width / 2;
                var textY = r * Math.cos((degNum) * 2 * Math.PI/360) + ctx.height / 2;
                c.font = r*0.1 + "px Arial"; 
                c.textBaseline = "middle";// 文字垂直对齐方式
                c.textAlign = "center";   // 文字水平对齐方式
                c.fillText(houre[degNum / 30],textX ,textY);
    //画刻度
                c.beginPath();
                c.arc(250,250,r*0.8,0,360); //圆
                c.strokeStyle='#fff';
                c.stroke();
            }
        }
        start();
        addText();
//获取时间
        setInterval(() => {
            var dataNow = new Date();
            var h = dataNow.getHours();
            var m = dataNow.getMinutes();
            var s = dataNow.getSeconds();
            h > 12 ? h = h -12 : h;
            c.clearRect(0,0,ctx.width,ctx.height);
            start();
            drawHours(h);
            drawMinutens(m);
            drawSecondes(s);
            origin();
            addText();
        },1000);

//绘制时
        function drawHours(h){
            c.save();
            c.beginPath();
            c.moveTo(250,250);
            c.arc(250,250,100,(h * 30 - 90) * Math.PI / 180, (h * 30 + 1 - 90)  * Math.PI / 180,false);
            c.fillStyle = '#000';
            c.fill();
            c.closePath();
            c.restore();
        }

//绘制分
        function drawMinutens(m){
            c.save();
            c.beginPath();
            c.moveTo(250,250); 
            c.arc(250, 250, 120, (m * 6 - 90) * Math.PI / 180, (m * 6 + 1 - 90) * Math.PI /180, false);
            c.fillStyle='yellow';
            c.fill();
            c.closePath();
            c.restore();
        }


//绘制秒
        function drawSecondes(s){
            c.save();
            c.beginPath();
            c.moveTo(250,250);
            c.arc(250,250,130,(s * 6 - 90) * Math.PI / 180, (s * 6 + 1 - 90)  * Math.PI / 180);
            c.fillStyle='#fff';
            c.fill();
            c.closePath();
            c.restore();
        }
        

    </script>
</body>
</html>

Allan_L

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
新手小白包教包会的 —— canvas画时钟

本次画时钟的几个步骤： 1. 布置静态表盘。 2. 布置数字 3.设置时分秒的指针转动速度技术点： canvas 和 javaScript 思路：利用canvas画圆和利用 js获取时间戳，动态绘制表盘，实现时钟指针的走动。关于canvas的简单介绍： canvas标签上要绑定宽，高； canvas的默认中心点为左上角，默认的水平方向为x轴；这3点在之后的时钟制作中都需要知道。下面是思路详解...
复制链接

扫一扫