h5：canvas绘制时钟

最新推荐文章于 2022-09-23 20:52:30 发布
最新推荐文章于 2022-09-23 20:52:30 发布
阅读量172 收藏 3
点赞数
分类专栏： 小工具 学习部分 文章标签： html5 html canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60297110/article/details/120464273
版权

目录

一：顿一下 

 二：平滑

一：顿一下 

 

<!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>
        .demo {
            margin: 20px auto;
            display: block;
            border: 5px solid pink;
            border-radius: 50px;
        }
    </style>

</head>

<body>
    <canvas id="app" class="demo" width="600" height="600"></canvas>
    <script>

        //创建图片加载器
        var img = new Image();

        //监听图片加载完成
        img.onload = function () {
            var canvas = document.getElementById('app');//获取canvas
            var ctx = canvas.getContext('2d');//获取上下文对象
            ctx.translate(canvas.width / 2, canvas.height / 2);//调整坐标系
            ctx.drawImage(img, -img.width / 2, -img.height / 2)//绘制图片
            //绘制中心点
            ctx.arc(0, 0, 10, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'red';
            ctx.fill();

            //绘制静态的时分秒指针
            line(0, 20, 0, -190, 'green', 5);//s
            line(0, 20, 0, -150, 'blue', 7);//m
            line(0, 20, 0, -110, 'hotpink', 9);//h

            // 方案一：各指针跳转执行
            var deg = Math.PI / 30; //秒：每秒6度
            setInterval(function () {
                var data = new Date();//获取时间
                var second = data.getSeconds();//获取时分秒
                var minute = data.getMinutes();
                var hour = data.getHours();

                //清除画布
                ctx.clearRect(-ctx.width / 2, -ctx.height / 2, canvas.width, canvas.height)
                ctx.drawImage(img, -img.width / 2, -img.height / 2); //绘制图片

                ctx.save(); //旋转之前存储状态/
                ctx.rotate(deg * second); //假设5s/先写静态的查看各指针的指位
                line(0, 20, 0, -190, 'green', 5);//s
                ctx.restore();// 恢复状态

                ctx.save(); //旋转之前存储状态
                ctx.rotate(deg * minute);//假设10m
                line(0, 20, 0, -150, 'blue', 7);//m
                ctx.restore();// 恢复状态

                ctx.save(); //旋转之前存储状态
                ctx.rotate(deg * 5 * hour);//假设5h
                line(0, 20, 0, -110, 'hotpink', 9);//h
                ctx.restore();// 恢复状态
            }, 100) //每秒执行5次，保证时间准确
     };
        //加载图片
        img.src = './clock.png';

        function line(x, y, endX, endY, color, num) {  //画一条直线
            var canvas = document.getElementById('app');//获取canvas
            var ctx = canvas.getContext('2d');//获取上下文对象
            ctx.beginPath();//2.启动绘制
            ctx.moveTo(x, y);//3.去画一个起点
            ctx.lineTo(endX, endY); //4.绘制线
            ctx.closePath(); //5.结束绘制
            ctx.strokeStyle = color;//7.更改描边颜色
            ctx.lineWidth = num;//8.绘制线粗
            ctx.stroke();  //6.描边
            //注意：改变颜色如果写在描边，之后，则不能上色，就像画画一样，已经华成默认黑了
        }
    </script>
</body>

</html>

 

二：平滑

 

<!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>
        .demo {
            margin: 20px auto;
            display: block;
            border: 5px solid pink;
            border-radius: 50px;
        }
    </style>

</head>

<body>
    <canvas id="app" class="demo" width="600" height="600"></canvas>
    <script>

        //创建图片加载器
        var img = new Image();

        //监听图片加载完成
        img.onload = function () {
            var canvas = document.getElementById('app');//获取canvas
            var ctx = canvas.getContext('2d');//获取上下文对象
            ctx.translate(canvas.width / 2, canvas.height / 2);//调整坐标系
            ctx.drawImage(img, -img.width / 2, -img.height / 2)//绘制图片
            //绘制中心点
            ctx.arc(0, 0, 10, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'red';
            ctx.fill();

            //绘制静态的时分秒指针
            line(0, 20, 0, -190, 'green', 5);//s
            line(0, 20, 0, -150, 'blue', 7);//m
            line(0, 20, 0, -110, 'hotpink', 9);//h

            //方案二：各指针平滑旋转
            var deg = Math.PI / 30; //秒：每秒6度
            var now = Date.now();//获取时间戳
            setInterval(function () {
                var now = Date.now();//注意：这里是东0区的时间
                var second = now / 1000;//s//获取时分秒
                var minute = second / 60;
                var hour = minute / 60;
                second %= 60;
                minute %= 60;
                // (0 - new Date().getTimezoneOffset() / 60)获取当前时区
                hour = hour % 24 + (0 - new Date().getTimezoneOffset() / 60);//加到东八区
                //清除画布
                ctx.clearRect(-ctx.width / 2, -ctx.height / 2, canvas.width, canvas.height)
                ctx.drawImage(img, -img.width / 2, -img.height / 2); //绘制图片

                ctx.save(); //旋转之前存储状态/
                ctx.rotate(deg * second); //假设5s/先写静态的查看各指针的指位
                line(0, 20, 0, -190, 'green', 5);//s
                ctx.restore();// 恢复状态

                ctx.save(); //旋转之前存储状态
                ctx.rotate(deg * minute);//假设10m
                line(0, 20, 0, -150, 'blue', 7);//m
                ctx.restore();// 恢复状态

                ctx.save(); //旋转之前存储状态
                ctx.rotate(deg * 5 * hour);//假设5h
                line(0, 20, 0, -110, 'hotpink', 9);//h
                ctx.restore();// 恢复状态
            }, 100) //每秒执行5次，保证时间准确

        };
        //加载图片
        img.src = './clock.png';

        function line(x, y, endX, endY, color, num) {  //画一条直线
            var canvas = document.getElementById('app');//获取canvas
            var ctx = canvas.getContext('2d');//获取上下文对象
            ctx.beginPath();//2.启动绘制
            ctx.moveTo(x, y);//3.去画一个起点
            ctx.lineTo(endX, endY); //4.绘制线
            ctx.closePath(); //5.结束绘制
            ctx.strokeStyle = color;//7.更改描边颜色
            ctx.lineWidth = num;//8.绘制线粗
            ctx.stroke();  //6.描边
            //注意：改变颜色如果写在描边，之后，则不能上色，就像画画一样，已经华成默认黑了
        }
    </script>
</body>

</html>

 

AC_QI
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas入门--绘制时钟
Crazykun的博客
02-09 671
canvas入门--绘制时钟
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1321
Document
使用canvas绘制一个时钟
sifanchao的博客
05-26 606
准备工作，设置基准 设置表钟的表心位置坐标（x,y）和表钟大小（r）。创建canvas，使用getContext() 方法返回canvas对象。 得到时分秒表针每走一步的度数，用来绘制扇形 初始化起始位置 时针因为一共12格，所以每走一步的度数为 30° 分针一共60格，所以一步为 6° 秒针6° 为了修饰，当秒针走了10秒时，分钟多一度；同理分针走了2分钟时，时针多一度。 绘制一个小刻度的扇形 绘制白色表盘 用白色表盘盖住上一个扇形圆，生成一个带有刻度的新扇形圆 绘制大刻度 绘制小白色表盘 绘
canvas 画简易时钟 （钟表时钟+数字时钟同步显示）
MarkJunHao的博客
08-04 2606
这次跟大家分享的是一个用canvas写的简易时钟，话不多说，直接上效果图： 下面是具体的代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&
Canvas实现自定义时钟
HYY的博客
04-04 702
实现效果 除了皮卡丘背景外的刻度线，时针分针秒针均是使用Canvas绘制出来的。 实现过程 设置基本大小及背景 1. 皮卡丘全脸素材 2. 基本结构 设置HTML结构如下： <div class="canvas-box"> <canvas width="300" height="300"></canvas> </div> 问题：这里为什么要外嵌一个div盒子呢？ 因为后续我们通过给div设置背景图片backgroun
JavaScript Canvas绘制时钟
最新发布
02-22
JavaScript Canvas绘制时钟
Map:canvas绘制地图
06-16
Map canvas绘制地图
canvas绘制表盘时钟
08-31
本文主要分享了canvas绘制表盘时钟的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
JS+Canvas绘制时钟效果
10-22
主要为大家详细介绍了基于javascript下使用canvas绘制时钟的具体实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
canvas_x:canvas绘制海报，生成logo二维码。也可生成编辑界面，用户自定义输入，一键生成
05-17
canvas_xcanvas绘制海报，生成logo二维码。也可生成编辑界面，用户自定义输入，一键生成。默认开启图片跨域，但服务端的图片也需要后端进行相应的跨域设置。使用方法npm 下载使用npm i -S @sayll/canvas_x// js 片段...
使用canvas绘制动态时钟
吟游诗人——吟唱生命的不朽
01-17 432
本文参考：https://www.imooc.com/learn/612 先放一个运行动图给大家看看 此前未曾学过canvas，因觉着有趣便跟着课程学了一下，也对canvas有了更加深入的理解。 绘制时钟的几个步骤： 1、画表盘那个圆 2、画时钟边上那种小点 3、画1-2-3-4…-12这几个数字（本例子是从3-4-5-…-12-1-2） 4、画静态的指针 5、让指针动起来 6、在指针动起来后清...
canvas画布画时钟(事件跟当前时间一样)
qq_44899153的博客
06-27 587
说明:代码里面的注释打开之后可以画出钟表的1-12时刻(在有背景图片是不需要打开) 效果图 1.关掉注释,有背景图 2.打开注释,无背景图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
使用canvas实现简单的时钟效果
JiangLittleBai的博客
01-21 1649
这次要借助canvas实现时钟效果，展示当前时间，形状为圆形。 完整实现效果截图如上 关键点 时钟效果的实现主要分为3部分 1、绘制表盘、大小刻度、1~12 等静态部分的绘制 2、展示当前时间 3、时针、分针和秒针动起来 绘制静态部分 首先得到canvas和canvas的绘图环境 var canvas=document.getElementById("canv
canvas 实现 简单钟表绘制
欢迎来到小屠的博客
04-05 2118
给大家分享一个canvas的时钟绘制 复制可直接使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> h1 { text-align: center; } di...
Canvas绘制时钟
发光的萤火虫
04-07 553
一、效果图展示 二、相关代码 1.clock.html 时钟 --> *{ padding:0; margin:0; } .canvas{ border:1px solid black; margin-top:20px;
Canvas绘制一个时钟
秃头小桂子
05-11 2182
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
简简单单使用Canvas撸个时钟
weixin_42490367的博客
01-14 705
简简单单使用Canvas撸个时钟 先来看一下效果 1、本次使用软件工具为HbuilderX，当然你也可以使用其他软件（Webstorm,VScode…）我们新建一个项目，项目结构如下图： 2、新建一个html文件，取名随意，好了接下来我们来简单编写一下页面的结构和样式，代码如下： <!DOCTYPE html> <html> <head> <me...
使用Canvas(画布）完成一个时钟
guitarist0505的博客
07-17 7875
Canvas最初由苹果推出，后来由W3C推广，目前几乎所有浏览器都支持Canvas。 canvas是一个闭合标签，包括宽度和高度属性。默认值为宽300，高150。浏览器不支持canvas时，canvas的文本会显示，通常用来检测浏览器兼容性。 &lt;canvas id="can" width="300" height="300"&gt;您的浏览器不支持canvas&lt;/canvas&g...
用canvas制作一个实时钟表，指针随时间改变而转动
lcplayer的博客
09-23 545
利用canvas绘制的动态实时钟表，包含有钟表指针的绘制函数，随着时间变化指针会跳动
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!... ...这段代码使用Canvas绘制了一个时钟，并且每秒钟更新一次。你可以将代码复制到一个HTML文件中运行，就可以看到时钟的效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值