自己做个时钟-html5的canvas

梦里梦外; 2022-09-19 12:12 36阅读 0赞

这个只是用来练习对html5的掌握程度的。

首先，时钟有一个表盘。

表盘包括框、刻度2个

框就是 一个圆，刻度是一个一个小的线段

圆用arc函数可以画出来，刻度只能通过画圆弧来表现。然后用另外一个小的圆把多余的线遮掉

同理，指针也可以这样来完成，通过一个角度为0的圆弧。

然后计算当前时间，通过判断时间来得到角度。

代码如下：

var canvas = null;
        var content = null;
        window.onload = function () {
            canvas = document.getElementById("canv");
            content = canvas.getContext("2d");
            
            setInterval("setTime()", 1000);
        }
        function setTime() {
            var times = new Date();
            var ohour = times.getHours();
            var omin = times.getMinutes();
            var osen = times.getSeconds();
    
            content.clearRect(0, 0, 1000, 760);
            content.save();
    
            content.beginPath();
            content.arc(500, 350, 330, 0, 360 * Math.PI / 180, false);
            content.closePath();
            content.stroke();
    
            for (var i = 0; i < 60; i++) {
                content.beginPath();
                content.moveTo(500, 350);
                content.arc(500, 350, 330, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
                content.closePath();
                content.stroke();
            }
            content.fillStyle = "#eee";
            content.beginPath();
            content.arc(500, 350, 330 * 19 / 20, 0, 360 * Math.PI / 180, false);
            content.closePath();
            content.fill();
    
            for (var i = 0; i < 12; i++) {
                content.beginPath();
                content.moveTo(500, 350);
                content.arc(500, 350, 330, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false);
                content.closePath();
                content.stroke();
            }
            content.fillStyle = "#eee";
            content.beginPath();
            content.arc(500, 350, 330 * 18 / 20, 0, 360 * Math.PI / 180, false);
            content.closePath();
            content.fill();
    
            var hourvalue = (ohour * 30 - 90 + omin / 12) * Math.PI / 180;
            var minvalue = (omin * 6 - 90) * Math.PI / 180;
            var senvalue = (osen * 6 - 90) * Math.PI / 180;
    
    
            content.lineWidth = 4;
            content.beginPath();
            content.moveTo(500, 350);
            content.arc(500, 350, 330 * 12 / 20, hourvalue, hourvalue, false);
            content.closePath();
            content.stroke();
    
            content.lineWidth = 3;
            content.beginPath();
            content.moveTo(500, 350);
            content.arc(500, 350, 330 * 15 / 20, minvalue, minvalue, false);
            content.closePath();
            content.stroke();
    
            content.lineWidth = 2;
            content.beginPath();
            content.moveTo(500, 350);
            content.arc(500, 350, 330 * 17 / 20, senvalue, senvalue, false);
            content.closePath();
            content.stroke();
    
            content.textBaseline = "top";
            content.fillStyle = "#333";
            content.font = "16px 微软雅黑";
            content.fillText(ohour + "：" + omin + "：" + osen, 470, 710);
            content.restore();
            //console.log(ohour + "：" + omin + "：" + osen);
        }

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 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 赞/ 25 阅读

相关自己做个时钟-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 阅读