canvas画时钟

最新推荐文章于 2023-10-26 08:47:56 发布
最新推荐文章于 2023-10-26 08:47:56 发布
阅读量325 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012260672/article/details/50286231
版权 
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <script>
        window.onload = function() {
                var canvas = document.getElementById("canvas");
                canvas.width = canvas.height = 400;
                canvas.style.background = "white";
                if (canvas.getContext) {
                        var ext = canvas.getContext("2d");
                        drawClock()
                        setInterval(drawClock, 1000);
                }

                function drawClock() {
                        var x = 200;
                        var y = 200;
                        var r = 150;
                        ext.clearRect(0, 0, canvas.width, canvas.height)
                        var oData = new Date();
                        var hours = oData.getHours();
                        var minutes = oData.getMinutes();
                        var seconds = oData.getSeconds();
                        var hoursValue = (-90 + hours * 30 + minutes / 2) * Math.PI / 180; //分针过了30，时针不应该正好在整点上，2分钟一度；
                        var minutesValue = (-90 + minutes * 6) * Math.PI / 180;
                        var secondsValue = (-90 + seconds * 6) * Math.PI / 180;
                        ext.lineWidth = 2
                        ext.arc(x, y, r, 0, Math.PI * 2, false);
                        ext.stroke();
                        //画小刻度
                        for (var i = 0; i < 60; i++) {
                                ext.strokeStyle = "black"
                                ext.lineWidth = 1;
                                ext.beginPath();
                                ext.moveTo(x, y);
                                ext.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false)
                                ext.closePath();
                                ext.stroke();
                        }
                        drawBlankCircle(10)
                                //画大刻度
                        for (var i = 0; i < 12; i++) {
                                ext.lineWidth = 3;
                                ext.strokeStyle = "green"
                                ext.beginPath();
                                ext.moveTo(x, y);
                                ext.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false)
                                ext.closePath();
                                ext.stroke();
                        }
                        drawBlankCircle(15)
                                //画空白覆盖圆;
                        function drawBlankCircle(d) {
                                ext.fillStyle = "white"
                                ext.beginPath();
                                ext.arc(x, y, r - d, 0, Math.PI * 2, false);
                                ext.closePath();
                                ext.fill();
                        }
                        //画时针;
                        ext.lineWidth = 5;
                        ext.strokeStyle = "#f90"
                        ext.beginPath();
                        ext.moveTo(x, y);
                        ext.arc(x, y, r - 60, hoursValue, hoursValue, false);
                        ext.closePath();
                        ext.stroke();
                        //画分针;
                        ext.lineWidth = 3;
                        ext.strokeStyle = "red"
                        ext.beginPath();
                        ext.moveTo(x, y);
                        ext.arc(x, y, r - 40, minutesValue, minutesValue, false);
                        ext.closePath();
                        ext.stroke();
                        //画秒针;
                        ext.lineWidth = 1;
                        ext.strokeStyle = "black"
                        ext.beginPath();
                        ext.moveTo(x, y);
                        ext.arc(x, y, r - 25, secondsValue, secondsValue, false);
                        ext.closePath();
                        ext.stroke();
                        //画表盘中心小圆;
                        ext.fillStyle = "black";
                        ext.beginPath();
                        ext.arc(x, y, 6, 0, Math.PI * 2, false);
                        ext.closePath();
                        ext.fill();
                }
        }
        </script>
</head>
<body >
<canvas id="canvas">

</canvas>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script>
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        canvas.width = canvas.height = 400;
        canvas.style.background = "white";
        if (canvas.getContext) {
            var ext = canvas.getContext("2d");
            drawClock()
            setInterval(drawClock, 1000);
        }

        function drawClock() {
            var x = 200;
            var y = 200;
            var r = 150;
            ext.clearRect(0, 0, canvas.width, canvas.height)
            var oData = new Date();
            var hours = oData.getHours();
            var minutes = oData.getMinutes();
            var seconds = oData.getSeconds();
            var hoursValue = (-90 + hours * 30 + minutes / 2) * Math.PI / 180; //分针过了30，时针不应该正好在整点上，2分钟一度；
            var minutesValue = (-90 + minutes * 6) * Math.PI / 180;
            var secondsValue = (-90 + seconds * 6) * Math.PI / 180;
            ext.lineWidth = 2
            ext.arc(x, y, r, 0, Math.PI * 2, false);
            ext.stroke();
            //画小刻度
            for (var i = 0; i < 60; i++) {
                ext.strokeStyle = "black"
                ext.lineWidth = 1;
                ext.beginPath();
                ext.moveTo(x, y);
                ext.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false)
                ext.closePath();
                ext.stroke();
            }
            drawBlankCircle(10)
                //画大刻度
            for (var i = 0; i < 12; i++) {
                ext.lineWidth = 3;
                ext.strokeStyle = "green"
                ext.beginPath();
                ext.moveTo(x, y);
                ext.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false)
                ext.closePath();
                ext.stroke();
            }
            drawBlankCircle(15)
                //画空白覆盖圆;
            function drawBlankCircle(d) {
                ext.fillStyle = "white"
                ext.beginPath();
                ext.arc(x, y, r - d, 0, Math.PI * 2, false);
                ext.closePath();
                ext.fill();
            }
            //画时针;
            ext.lineWidth = 5;
            ext.strokeStyle = "#f90"
            ext.beginPath();
            ext.moveTo(x, y);
            ext.arc(x, y, r - 60, hoursValue, hoursValue, false);
            ext.closePath();
            ext.stroke();
            //画分针;
            ext.lineWidth = 3;
            ext.strokeStyle = "red"
            ext.beginPath();
            ext.moveTo(x, y);
            ext.arc(x, y, r - 40, minutesValue, minutesValue, false);
            ext.closePath();
            ext.stroke();
            //画秒针;
            ext.lineWidth = 1;
            ext.strokeStyle = "black"
            ext.beginPath();
            ext.moveTo(x, y);
            ext.arc(x, y, r - 25, secondsValue, secondsValue, false);
            ext.closePath();
            ext.stroke();
            //画表盘中心小圆;
            ext.fillStyle = "black";
            ext.beginPath();
            ext.arc(x, y, 6, 0, Math.PI * 2, false);
            ext.closePath();
            ext.fill();
        }
    }
    </script>
</head>
<body >
<canvas id="canvas">

</canvas>

</body>
</html>
诸葛苍穹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用html5 canvas 画时钟代码实例分享
09-28
主要介绍了使用html5 canvas 画时钟代码实例分享的相关资料,需要的朋友可以参考下
Canvas实现简单时钟表盘
qq_31808873的博客
05-15 509
Canvas绘制表盘
canvas常用方法，canvas绘制时钟案例
最新发布
study_way的博客
10-26 253
在路径对象上，使用不同的绘图命令来定义路径的形状。
Canvas绘制一个时钟
秃头小桂子
05-11 2202
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
canvas绘制时钟
qq_40710974的博客
09-29 957
大部分的内容都是参考这里的,但是我做了改动并且讲的会更细一点 https://mp.weixin.qq.com/s/qhPg2TjjcFh9l5ZLUsFPSg
H5的canvas画时钟
10-20
用HTML5的canvas画时钟，怎么使用画布在浏览器上面绘画。画出一个漂亮的时钟。里面用到三角函数以及一些canvas的方法。
HTML5 Canvas 动画时钟
04-08
NULL 博文链接：https://mooring.iteye.com/blog/1594032
JavaScript canvas动画实现时钟效果
10-15
主要为大家详细介绍了JavaScript canvas动画实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
canvas 绘制钟表
kklkjfdiiu的博客
03-30 154
时钟示例
Html+JavaScript 在canvas上绘制带日期显示的时钟 (自己绘制刻度)
11-11
Html+JavaScript 在canvas上绘制带日期显示的时钟 (自己绘制刻度)。 想了解此框架以及程序结果图的，可以去博客看一看，再决定下载与否。
canvas绘制时钟刻度表
libinbin147256369的博客
05-05 2963
canvas绘制时钟刻度表1.首先看一下效果图2.基本知识点canvas.drawText：绘制文字，注意基线的位置为文字的左下角y轴所在的线canvas.drawLine:绘制线段，指定起始位置就好canvas.save:保存canvas的状态，比如translate平移之前或者rotate(单位为°，正为顺时针)旋转之前的状态canvas.restore:恢复到保存时候的canvas状态，这么...
使用Canvas(画布）完成一个时钟
guitarist0505的博客
07-17 7878
Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。 canvas是一个闭合标签，包括宽度和高度属性。默认值为宽300，高150。浏览器不支持canvas时，canvas的文本会显示，通常用来检测浏览器兼容性。 &lt;canvas id="can" width="300" height="300"&gt;您的浏览器不支持canvas&lt;/canvas&g...
Canvas 画时钟
destiny'Note
11-30 5860
前言不管学习什么，不动手去做，永远不能熟练掌握。学习了 canvas API，会觉得只要按照直线、圆等画法去画，canvas 太简单了。可是，当你真正去画的时候，会遇到许多的问题。下面介绍的是 canvas 时钟，主要是与大家分享我的学习过程。 不懂 canvas 的同学，请先学习：Canvas 画布 一、相关几何知识钟面是一个圆，主要包含每个小时数字、以及刻度，它们的位置坐标应该如何计
canvas绘制精细走动时钟
小圣贤君的博客
11-16 5312
这里简单了利用canvas做了一个时钟，能够实现分针和时针较精确的走动，没有太多难点，重点的是要实现分针和时针走动，角度的计算，笔者在下面进行说明。先看效果图： 颜色单配的比较难看，读者谅解。请看代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
canvas 绘制时钟 ……
QDY5945的博客
11-12 125
相当的困难 <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> <title>clock</title> <sty...
canvas实现刻度时钟&太极
hdy119yaner的博客
04-12 511
一、刻度时钟 HTML <canvas id="myCanvas" width="500px" height="500px"> </canvas> 注意： 如果不给 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建...
canvas时钟
喜欢文学的程序员
06-02 889
canvas是HTML5新增的组件，提供了新的javascript API。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。canvas就像是页面上的一块画布，而jav...
html：canvas画布绘图简单入门-绘制数字时钟
04-07
接下来，我们可以使用Canvas的API来绘制时钟的各个部分，包括外圆、小时刻度、分钟刻度、时针、分针和秒针。最后，我们可以使用JavaScript中的定时器来更新时钟的显示，使其每秒钟更新一次。希望这个简单的入门教程...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值