教你实现一个朴实的Canvas时钟效果
2023-02-18 15:41:43 时间
摘要:今天教大家写一个canvas的时钟案例,效果可能看起来比较简单,没有那些花里胡哨的。
本文分享自华为云社区《如何实现一个朴实无华的Canvas时钟效果》,作者: 北极光之夜。。
一.先看效果:
今天写一个canvas的时钟案例。效果可能看起来比较简单,没有那些花里胡哨的,不过,它涉及的canvas知识点是比较多的,初学canvas那是必定要会的。下面手把手带你快速实现~
二.实现步骤(源码在最后):
1. 设置基本的标签与样式:
<div class="clock"> <canvas width="300" height="300" id="canvas"></canvas> </div> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; justify-content: center; align-items: center; color: rgb(3, 47, 98);">rgb(204, 204, 204); } .clock { width: 300px; height: 300px; color: rgb(3, 47, 98);">rgb(15, 15, 15); border-radius: 50px; }
2. 开始js代码实现,下面为了易于理解,所以一个功能封装一个函数:
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");
3. 先绘制钟的整体白色底盘:
同时为了后期将旋转点为.clock的中心的,所以将translate偏移一半的距离。
function drawPanel() { ctx.translate(150, 150); // 开始绘制 ctx.beginPath(); // 画一个圆 ctx.arc(0, 0, 130, 0, 2 * Math.PI); ctx.fillStyle = "white"; ctx.fill(); }
4.绘制时钟的12位数字:
可知,一个圆上它的x坐标为:R * cos(它的角度), y坐标为:R *sin(它的角度)。
同时,因为Math.cos()与Math.sin()里是计算弧度的,所以要转换。公式:弧度 = 角度 * π / 180
function hourNum() { // 存放12个数字 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; ctx.beginPath(); // 数字的基本样式 ctx.font = "30px fangsong"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "black"; for (var i = 0; i < arr.length; i++) { ctx.fillText( arr[i], 108 * Math.cos(((i * 30 - 60) * Math.PI) / 180), 108 * Math.sin(((i * 30 - 60) * Math.PI) / 180) ); } }
5. 绘制时钟中心的圆点:
一个灰圆覆盖一个稍大的黑圆。
function centerDot() { ctx.beginPath(); ctx.arc(0, 0, 8, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.fillStyle = "gray"; ctx.arc(0, 0, 5, 0, 2 * Math.PI); ctx.fill(); }
6.绘制时针:
假设参数 hours 与 minutes 为传入的当前的时间的小时数与分钟数。
function hourHand(hours, minutes) { // 应该旋转的角度,默认时钟为指向12点方向。 var radius = ((2 * Math.PI) / 12) * hours + (((1 / 6) * Math.PI) / 60) * minutes; // 保存当前状态,为了旋转后能回到当初状态。 ctx.save(); ctx.beginPath(); // 针的宽度 ctx.lineWidth = 5; // 针头为圆角 ctx.lineCap = "round"; ctx.strokeStyle = "black"; // 旋转 ctx.rotate(radius); // 画一条线表示时钟 ctx.moveTo(0, 0); ctx.lineTo(0, -50); ctx.stroke(); // 回到保存的状态 ctx.restore(); }
7. 同理,绘制分针:
function minuteHand(minutes) { 2 * Math.PI; var radius = ((2 * Math.PI) / 60) * minutes; ctx.save(); ctx.beginPath(); ctx.lineWidth = 3; ctx.lineCap = "round"; ctx.strokeStyle = "black"; ctx.rotate(radius); ctx.moveTo(0, 0); ctx.lineTo(0, -70); ctx.stroke(); ctx.restore(); }
8. 同理,绘制秒针:
function secondHand(seconds) { var radius = ((2 * Math.PI) / 60) * seconds; ctx.save(); ctx.beginPath(); ctx.lineWidth = 1; ctx.lineCap = "round"; ctx.strokeStyle = "red"; ctx.rotate(radius); ctx.moveTo(0, 0); ctx.lineTo(0, -90); ctx.stroke(); ctx.restore(); }
9. 封装一个函数获取当前时间:
同时函数内部调用全部绘制的函数。实现绘制一个完整的时钟。
function update() { var time = new Date(); var hours = time.getHours(); var minutes = time.getMinutes(); var seconds = time.getSeconds(); // 保存canvas状态,因为绘制底盘时它偏移了 ctx.save(); drawPanel(); hourNum(); secondHand(seconds); minuteHand(minutes); hourHand(hours, minutes); centerDot(); // 恢复canvas状态 ctx.restore(); } update();
10. 开启定时器,时钟运转:
setInterval(() => { ctx.clearRect(0, 0, canvas.width, canvas.height); update(); }, 1000);
三.总结:
上面就是全部内容了,实现并不难,就是对canvas提供的一些方法进行合理的使用,拿来练手是很不错的。源码在我的gitee仓库直接去下载或者复制获取?:https://gitee.com/aurora-in-winter/blog.git
相关文章
- 一键AI着色,黑白老照片画面瞬间鲜活
- 揭开“QUIC”的神秘面纱
- 端云协同,打造更易用的AI计算平台
- python 计算程序运行时间
- 页面路径分析模型全新上线,让你的产品更懂用户
- 华为首次采用数字人全程实时手语直播,并宣布全面开放手语服务能力
- Flink1.13架构全集| 一文带你由浅入深精通Flink方方面面
- Flink1.13架构全集| 一文带你由浅入深精通Flink方方面面(二)
- 指标维度 - 1 - 海量科目前 N 名计算
- PowerBI 计算疫情影响的业务天数
- 微软首次公布:PowerBI 支持原生视图层计算,巨大变革将至
- ArcMap自动计算单一波段或多波段栅图像NDVI的方法
- ArcMap卡在加载界面、无法打开的解决方法
- 植被冠层参数计算软件CAN-EYE的下载与安装
- CAN-EYE计算植被冠层参数的方法
- PowerBI: 使用计算组功能计算不同度量值的同比、环比
- PowerBI: 条件格式中百分比的计算原理
- 2023届数字IC面经 | 一定要投提前批
- 2023届数字IC面经 | 985机电专业成功转行上岸
- 2023届数字IC面经 | 项目一定要吃透