自己做个时钟改进版-html5的canvas

男娘i 2022-09-19 12:17 25阅读 0赞

上一版本的时钟做的太简单了，以至于要加点什么东西都不行或者很难了。后来我改进了一下，换了一个思路。

用画圆的方法确实可以做出来，但是后续加东西就比较麻烦了。不如一次性的做好吧。

具体的思路就是利用路径一次性的画好。

代码如下：

function clock() {
            var now = new Date();
            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.save();
            ctx.clearRect(0, 0, 1000, 760);
            ctx.translate(500, 370);
            //ctx.scale(0.4, 0.4);
            ctx.rotate(-Math.PI / 2);
            ctx.strokeStyle = "black";
            ctx.fillStyle = "white";
            ctx.lineWidth = 8;
            ctx.lineCap = "round";
    
            // Hour marks
            ctx.save();
            for (var i = 0; i < 12; i++) {
                ctx.beginPath();
                ctx.rotate(Math.PI / 6);
                ctx.moveTo(300, 0);
                ctx.lineTo(320, 0);
                ctx.stroke();
            }
            ctx.restore();
    
            // Minute marks
            ctx.save();
            ctx.lineWidth = 5;
            for (i = 0; i < 60; i++) {
                if (i % 5 != 0) {
                    ctx.beginPath();
                    ctx.moveTo(317, 0);
                    ctx.lineTo(320, 0);
                    ctx.stroke();
                }
                ctx.rotate(Math.PI / 30);
            }
            ctx.restore();
    
            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hr = now.getHours();
            hr = hr >= 12 ? hr - 12 : hr;
    
            ctx.fillStyle = "black";
    
            // write Hours
            ctx.save();
            ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
            ctx.lineWidth = 14;
            ctx.beginPath();
            ctx.moveTo(-20, 0);
            ctx.lineTo(180, 0);
            ctx.stroke();
            ctx.restore();
    
            // write Minutes
            ctx.save();
            ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec)
            ctx.lineWidth = 10;
            ctx.beginPath();
            ctx.moveTo(-28, 0);
            ctx.lineTo(222, 0);
            ctx.stroke();
            ctx.restore();
    
            // Write seconds
            ctx.save();
            ctx.rotate(sec * Math.PI / 30);
            ctx.strokeStyle = "#D40000";
            ctx.fillStyle = "#D40000";
            ctx.lineWidth = 6;
            ctx.beginPath();
            ctx.moveTo(-30, 0);
            ctx.lineTo(283, 0);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(275, 0, 10, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.fillStyle = "#555";
            ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.restore();
    
            ctx.beginPath();
            ctx.lineWidth = 14;
            ctx.strokeStyle = '#325FA2';
            ctx.arc(0, 0, 335, 0, Math.PI * 2, true);
            ctx.stroke();
    
            ctx.restore();
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas 绘制时钟(2021/5/7)

> 图像的分辨率图像的分辨率是800600 图片容器的大小是800px600px <canvas id="canvas" width="800" heigh

╰+攻爆jí腚メ/ 2023年01月19日 04:38/ 0 赞/ 236 阅读

相关 HTML5 Canvas

Canvas画布描述获取方式注意点画布API 上下文API 颜色、样式和阴影线条样式

落日映苍穹つ/ 2023年01月10日 13:13/ 0 赞/ 218 阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 321 阅读

相关用html做龙卷风特效,HTML5/Canvas 彩色龙卷风

JavaScript 语言： JaveScriptBabelCoffeeScript 确定 window.requestAnimFrame = (function()

谁借莪１个温暖的怀抱￠/ 2022年10月06日 10:50/ 0 赞/ 56 阅读

相关自己做个时钟改进版-html5的canvas

上一版本的时钟做的太简单了，以至于要加点什么东西都不行或者很难了。后来我改进了一下，换了一个思路。用画圆的方法确实可以做出来，但是后续加东西就比较麻烦了。不如一次性的做好吧

男娘i/ 2022年09月19日 12:17/ 0 赞/ 26 阅读

相关自己做个时钟-html5的canvas

这个只是用来练习对html5的掌握程度的。首先，时钟有一个表盘。表盘包括框、刻度2个框就是一个圆，刻度是一个一个小的线段圆用arc函数可以画出来，刻度只能通过

梦里梦外;/ 2022年09月19日 12:12/ 0 赞/ 37 阅读

相关 HTML5 canvas

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2022年07月19日 11:48/ 0 赞/ 333 阅读

相关 HTML5Canvas

Canvas -> 做游戏：白鹭引擎、trees... 动画图表、频谱画图 HTML5 不只是单纯HTML 本身是一个标签 <canvas></canva

素颜马尾好姑娘i/ 2022年06月10日 05:19/ 0 赞/ 371 阅读

相关【HTML5】——Canvas

Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形）用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中

曾经终败给现在/ 2022年06月07日 03:44/ 0 赞/ 423 阅读

相关 h5 Canvas时钟制作

canvas可以说是html5中最强大的元素之一下面我们就使用canvas来进行绘制一个时钟在绘制之前,我们需要知道需要绘制的元素都有哪些,其中包括钟最外边的圆圈、钟表上

待我称王封你为后i/ 2022年03月17日 15:43/ 0 赞/ 498 阅读