使用canvas绘制超炫时钟

最新推荐文章于 2024-07-13 09:43:34 发布
最新推荐文章于 2024-07-13 09:43:34 发布
阅读量375 收藏 6
点赞数 8
分类专栏： html 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huayula/article/details/136666996
版权

HTML5 Canvas相当于一个画板，你可以在Canvas绘制任意的东西，今天要分享一款利用HTML5 Canvas绘制的超炫时钟的方法及代码，非常的漂亮，这里推荐给大家
在这里插入图片描述

代码地址

使用canvas绘制超炫时钟

酷爱码
关注
  • 8
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用HTML5的canvas实现一个炫酷时钟效果
01-21
对于H5来说，canvas可以说是它最有特色的一个地方了，有了它之后我们可以随意的在网页上画各种各样的图形，做一些小游戏啊什么的。canvas这个标签的用法，在网上也有特别多的教程了，这里就不作介绍了。今天我们就用canvas来做一个小小的时钟。 那么首先在这个页面里面我使用了两个canvas，一个用来绘制静态的时钟表盘和刻度，另一个用来绘制时钟的三个指针，然后用定位让他们重合到一起。然后这里没什么好说的，下面附上代码。 JavaScript Code复制内容到剪贴板 <canvas u00a0id=plate>            画表盘    </canvas>   
使用HTML5绘制时钟,使用canvas绘制超炫时钟
weixin_35057850的博客
06-15 104
先上效果图：复制代码代码如下:canvas钟表body{margin:0;}如果你看到这段文字，说明你的浏览器弱爆了！window.onload=draw;function draw() {var canvas=document.getElementById('canvas');var context=canvas.getContext('2d');context.save(); ////////...
canvas炫酷时钟
asd1242189163的博客
05-06 252
canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html： <canvas id="myCanvas" width="500" height="500"></canvas> css： #myCanvas{ position: absolute; top: 50%; ...
canvas制作酷炫时钟
墨羽晨的博客
10-04 262
先看效果图 可以配合之前的动态时钟，效果不错 js进阶实例，数字时钟_墨者羽晨的博客-CSDN博客先看效果，动态数字时钟用到了jQuery，但是只是用来获取元素，只有一点点面向对象开发看代码HTML，自己引入jQuery和js，jQuery在前<body> <div class="wrapper"> <div class="column"> <!-- 此div表示时的十位，只有0,1,2三个 --> <div>0</div> .
canvas绘制炫酷时钟
weixin_43967169的博客
05-17 105
canvas绘制时钟刻度表 基本知识点 canvas.drawText：绘制文字，注意基线的位置为文字的左下角y轴所在的线 canvas.drawLine:绘制线段，指定起始位置就好 canvas.save:保存canvas的状态，比如translate平移之前或者rotate(单位为°，正为顺时针)旋转之前的状态 canvas.restore:恢复到保存时候的canvas状态，这么理解：translate平移了坐标，从初始位置屏幕左上角（0,0）到屏幕中间(mWidth/2,mHeight/2)，这时候如
canvas绘制表盘时钟
08-31
总的来说，使用Canvas API绘制表盘时钟是一个很好的实践项目，它展示了如何利用JavaScript和Canvas API实现动态、交互式的网页图形。这个过程涉及到数学（如角度计算）、时间和日期处理，以及图形绘制技巧，对提升...
使用Canvas绘制风景时钟
07-06
使用 Canvas 以及日期对象等知识制作风景时钟效果
微信小程序使用canvas绘制实现时钟
11-01
接下来定义`drawClock`方法，用于在canvas上绘制时钟： ```javascript drawClock() { const ctx = this.data.ctx; const now = new Date(); // 清除画布 ctx.clearRect(0, 0, 300, 300); // 绘制时钟圆盘 ...
canvas--绚丽的时钟效果
lsy__lsy的博客
05-17 370
参考文档:https://blog.csdn.net/heyan1106yan/article/details/52998285&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximu...
HTML5 canvas超逼真的模拟时钟特效
12-12
thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效。该时钟特效使用jQuery和HTML5 Canvas API来制作，模拟现实生活中的时钟。并且它还具有定时闹钟的功能。
h5用canvas实现漂亮的时钟效果
11-06
h5用canvas实现漂亮的时钟效果 h5用canvas实现漂亮的时钟效果
canvas绘图实现实时时钟效果
01-26
插件描述：canvas绘图实现时钟效果.
利用canvas 来画一个动态的时钟
weixin_30437337的博客
02-26 88
前言： 今天利用了点时间学习了如何用canvas来绘制一个动态的时钟，觉得html5的功能实在强大。下面开始分享我的代码以及一些注释。 html部分： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g...
canvas绚丽的时钟效果（上）
MayMayJn的博客
12-07 673
canvas是HTML5的特性，是定义在浏览器上的画布。前端好多精美的网页都会用到canvas这一特性。 慕课网上有很多canvas的教程，我学了一个比较基础但是效果非常引人入胜的教程，就是用canvas动画实现倒计时效果。用canvas进行基础的绘画：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
canvas简单实现动态时钟
weixin_34309543的博客
05-25 103
使用到的知识： 1. 获取系统时间2. 画图形，空心图形，实心图形，以及一些属性 3. for循环准备工作：添加一块画布1000*1000（随意），引用canvas.js<!doctypehtml> <html> <head> <metacharset="UTF-8"> ...
Canvas：实现在线动态时钟效果
最新发布
ztK63LrD的博客
07-13 924
想象一下，用几行代码就能创造出如此逼真的图像和动画，仿佛将艺术与科技完美融合，前端开发的Canvas技术正是这个数字化时代中最具魔力的一环，它不仅仅是网页的一部分，更是一个无限创意的画布，一个让你的想象力自由驰骋的平台。
Canvas实现数字电子时钟（带粒子掉落效果）
qq_44910894的博客
04-03 375
本文主要演示了如何使用 Canvas 绘图技术实现一个简易的数字电子时钟的效果，增加了粒子掉落效果，采用了面对对象的实现思路。
Canvas实现简易数字电子时钟（带自定义样式）
qq_44910894的博客
04-03 458
本文主要演示了如何使用 Canvas 绘图技术实现一个简易的数字电子时钟的效果，增加了粒子掉落效果和自定义样式，采用了面对对象的实现思路。
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <html> <head> <title>Canvas时钟</title> <style> canvas { border: 2px solid black; } </style> </head> <body> <canvas id="clock" width="200" height="200"></canvas> <script> function drawClock() { // 获取Canvas元素 var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); // 获取Canvas中心点坐标 var centerX = canvas.width / 2; var centerY = canvas.height / 2; // 绘制表盘 ctx.beginPath(); ctx.arc(centerX, centerY, 80, 0, 2 * Math.PI); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制刻度 for (var i = 1; i <= 12; i++) { var angle = i * Math.PI / 6; var x = centerX + 60 * Math.sin(angle); var y = centerY - 60 * Math.cos(angle); ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); } // 绘制时针 var now = new Date(); var hour = now.getHours() % 12; var minute = now.getMinutes(); var second = now.getSeconds(); var hourAngle = (hour + minute / 60) * Math.PI / 6; var hourX = centerX + 40 * Math.sin(hourAngle); var hourY = centerY - 40 * Math.cos(hourAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(hourX, hourY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制分针 var minuteAngle = minute * Math.PI / 30; var minuteX = centerX + 60 * Math.sin(minuteAngle); var minuteY = centerY - 60 * Math.cos(minuteAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(minuteX, minuteY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制秒针 var secondAngle = second * Math.PI / 30; var secondX = centerX + 60 * Math.sin(secondAngle); var secondY = centerY - 60 * Math.cos(secondAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(secondX, secondY); ctx.strokeStyle = "red"; ctx.stroke(); } // 每秒钟更新时钟 setInterval(drawClock, 1000); </script> </body> </html> ``` 这段代码使用Canvas绘制了一个时钟，并且每秒钟更新一次。你可以将代码复制到一个HTML文件中运行，就可以看到时钟的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

酷爱码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值