canvas实现时钟

最新推荐文章于 2022-11-21 19:02:08 发布
最新推荐文章于 2022-11-21 19:02:08 发布
阅读量167 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53903290/article/details/125153705
版权

webview html html5

使用H5新特性的画布功能实现一个时钟：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        #canvas {

            border: 1px solid;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <canvas width="150" height="150" id="canvas"></canvas>

    <script>

        var ctx = document.getElementById("canvas").getContext('2d');

        ctx.translate(75, 75);

        ctx.rotate(-Math.PI / 2); //逆时针旋转九十度

        ctx.lineCap = "round";

        ctx.save();

        clock();

        //绘制小时刻度

        function clock() {

            ctx.clearRect(-75, -75, 150, 150);

            ctx.fillStyle = 'pink';

            ctx.fill();

            ctx.fillRect(-75, -75, 150, 150);

            var date = new Date();

            ctx.lineWidth = 3 //设置线条宽度

            for (var i = 0; i < 12; i++) {

                ctx.beginPath()

                ctx.rotate(Math.PI / 6)

                ctx.moveTo(68, 0)

                ctx.lineTo(75, 0)

                ctx.stroke()

            }

            //绘制分钟

            ctx.lineWidth = 2 //设置线条宽度

            for (var i = 0; i < 60; i++) {

                ctx.beginPath();

                if (i % 5 != 0) {

                    ctx.moveTo(72, 0)

                    ctx.lineTo(75, 0)

                    ctx.stroke()

                }

                ctx.rotate(Math.PI / 30);

            }

            var hour = date.getHours();

            var min = date.getMinutes();

            var sec = date.getSeconds();

            console.log(hour, min, sec);

            //绘制时针

            ctx.restore();

            ctx.save();

            ctx.lineWidth = 5;

            hour > 12 ? hour - 12 : hour;

            ctx.rotate((Math.PI / 6) * (hour + min / 60 + sec / 3600));

            ctx.beginPath();

            ctx.moveTo(-10, 0);

            ctx.lineTo(40, 0);

            ctx.stroke();

            //绘制分针

            ctx.restore();

            ctx.save();

            ctx.lineWidth = 3;

            ctx.rotate((Math.PI / 30) * (min + sec / 3600));

            ctx.beginPath();

            ctx.moveTo(-10, 0);

            ctx.lineTo(60, 0);

            ctx.stroke();

            //绘制秒针

            ctx.restore();

            ctx.save();

            ctx.lineWidth = 3;

            ctx.rotate((Math.PI / 30) * (sec));

            ctx.beginPath();

            ctx.moveTo(-10, 0);

            ctx.lineTo(60, 0);

            ctx.strokeStyle = 'red';

            ctx.stroke();

            //在原点出绘制小红原点

            ctx.beginPath();

            ctx.arc(0, 0, 5, 0, 2 * (Math.PI));

            ctx.fillStyle = "red";

            ctx.fill();

            //在秒针末端绘制小红圆圈

            ctx.beginPath();

            ctx.arc(65, 0, 5, 0, 2 * (Math.PI));

            ctx.fillStyle = 'red';

            ctx.fill();

            ctx.restore();

        }

        setInterval(function() {

            clock();

        }, 1000);

    </script>

</body>

</html>

 

小白（前端）
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 canvas实现钟表
a821253811的博客
09-21 1139
上次说到了canvas的画布如何画矩形、圆形和自由画图实现你画我猜的效果，这次就来说一下如何实现我们生活中最经常看到的时钟吧。 还是和之前一样的操作，写好画布的大小，因为有些浏览器不支持，所以写上不支持，在遇到不支持的浏览器时就会出现不支持三个字 &lt;canvas id="canvas" width="400" height="400"&gt; 不支持 &lt;/canvas&...
canvas实现动态时钟
qq_40181764的博客
12-26 164
如题： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;div style="border:1px solid red;width:500px;height:500px;margin:0 auto"&gt; &lt;!--html5新标记： 简单
用Canvas实现时钟的效果
qq_25972233的博客
01-01 204
用canvas画布实现时钟效果 相信很多学习前端的新人,学完html结构和css样式以后,都会开始学习JavaScript,在学一段JavaScript以后会接触到canvas画布部分,相信很多同学学习完以后没有很好的项目给自己能够练习,所有我在这里把代码和项目送给有需要的同学！！ 前言 各位五湖四海的同学既然选择了前端开发这个行业,就努力的学下去吧,在这个行业技术不断的提高,才有可能获得你想要的报酬,废话就不多说啦,下面请用心的去理解 一、Canvas HTML的结构部分 <!DOCTYPE h
h5，canvas实现时钟.zip
03-20
在这个“h5，canvas实现时钟”的项目中，我们主要关注如何利用Canvas API来创建一个实时更新的旋转时钟。这个时钟不仅具有炫酷的彩色外观，颜色还能动态变化，为用户提供高度自定义的可能性。 首先，我们需要理解...
JS+H5 Canvas实现时钟效果
10-18
这两个变量（`canvas`和`context`）是实现时钟功能的核心。 `draw()`函数是核心方法，它负责绘制时钟。我们首先获取当前时间，然后计算小时、分钟和秒的角度值，因为Canvas中的弧度绘制是基于角度的。例如，一个...
使用js和canvas实现时钟效果
10-14
在这个案例中，我们将利用Canvas的绘图功能，结合JavaScript处理时间数据，来实现一个时钟。 首先，我们需要一个`<canvas>`元素作为画布，并设置其宽度和高度，以及一个ID以便于在JavaScript中引用。在提供的代码中...
带你使用canvas实现时钟
qq_45768871的博客
04-22 839
带你使用canvas实现时钟 实现表盘 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin...
Canvas 画时钟
destiny'Note
11-30 5881
前言不管学习什么，不动手去做，永远不能熟练掌握。学习了 canvas API，会觉得只要按照直线、圆等画法去画，canvas 太简单了。可是，当你真正去画的时候，会遇到许多的问题。下面介绍的是 canvas 时钟，主要是与大家分享我的学习过程。 不懂 canvas 的同学，请先学习：Canvas 画布 一、相关几何知识钟面是一个圆，主要包含每个小时数字、以及刻度，它们的位置坐标应该如何计
canvas绘图实现实时时钟效果
01-26
插件描述：canvas绘图实现时钟效果.
html5时钟（Canvas）
01-27
基于html5canvas技术绘制clock时钟，封装与一个js库， new Clock(width,height,id) width时钟宽度 height时钟高度 id定位于那个html容器（div的id）
canvas做时钟
07-14
动态钟表
canvas动画 实现时钟效果(详细注释)
小柒的前端之旅
04-17 567
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
使用Canvas HTML5画出时钟
最新发布
m0_65627447的博客
11-21 1021
HTML5 Canvas画时钟
canvas入门--绘制时钟
Crazykun的博客
02-09 696
canvas入门--绘制时钟
用h5中canvas实现钟表
weixin_43571052的博客
05-21 358
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
js+Canvas实现时钟图，简单易懂
gisercug的博客
07-07 1397
本文主要参考canvas入门网址，加上自己理解将钟表图用原生js写出来，有两个难点 1.整个时钟的实现的难点和重点是save（）和restore（）的进栈 出栈，后进先出，理解的有点难，参考上面的网址很好理解，最后需要让第一个进栈的出栈 2， requestAnimFrame()这个函数，功能强大，类似于定时器，但其兼容性不好，之前没了解好，直接拿来用，结果导致了错误，具体优点可以参考这篇文章更...
canvas实现时钟案例
weixin_45389051的博客
03-06 311
一.html <canvas id="clock" width="500" height="500" >你的浏览器不支持canvas</canvas> 二.css canvas{ background: #000; } 三.js <script> /* 难点1:怎样把时刻线绘制出来 难点2： 时间指针的旋转角度 秒：360/6...
HTML5 canvas实现时钟示例：前端基础教程
这段代码是一个用于测试的HTML文件，它主要用于实现一个简单的时钟功能，并结合HTML、CSS和JavaScript来展示。以下是对该代码的知识点进行详细解析： 1. HTML结构: - HTML5文档结构清晰，包括`<!DOCTYPE html>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值