教你实现一个朴实的Canvas时钟效果

摘要：今天教大家写一个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;background-color: rgb(204, 204, 204);}.clock {width: 300px;height: 300px;background-color: 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仓库直接去下载或者复制获取

教你实现一个朴实的Canvas时钟效果相关推荐

如何实现一个朴实无华的Canvas时钟效果
一.先看效果:
cad脚本合适_CAD脚本以前在学校老师用CAD教画了一个会走的时钟，里面还涉及爱问知识人...
给你一根秒针,三根针的你自己做: 一.在D盘(假设如此,路径当然可自选)创建脚本文件"CLOCK_ r",内容: ;draw a line line 0,0 10,0 zoom m ...
手把手教你实现一个canvas智绘画板
手把手教你实现一个canvas智绘画板下载地址前言本文主要介绍: 项目介绍项目效果展示一步步实现项目效果踩坑一.项目介绍名称: 智绘画板技术栈: HTML5,CSS3,JavaScr ...
手把手教你做一个天气时钟，推荐收藏
转自:MAKER: opengreenenergy/译:公众号:趣无尽大家好,我是小麦,今天给大家分享一个有趣的天气时钟项目. 这个项目使用 ESP8266 和 2.8 英寸触摸屏来制作显示器,通过 ...
基于canvas的原生JS时钟效果
概述运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
手把手教你做一个自己的chrome扩展程序
手把手教你做一个自己的chrome扩展程序 [目录] first.效果 1.收藏夹修改 (1).鼠标移动到收藏夹上的动作效果 (2).收藏夹框 (3)百度搜索框功能 2.右上文字修改 3.背景图片修改 ...
不会编程也能亲手编写一个桌面数字小时钟程序，仅3步轻松实现
开发一款自己专属的软件应用很难吗?不会编程也能亲手编写一个桌面数字小时钟程序,仅需3步教你轻松实现,人人都可学.只需 13 行代码,您就可以制作自己的数字时钟,先看运行效果: 第一步打开电脑自带的记 ...
python透明的桌面时钟_教你给手机桌面添加透明时钟，好看还实用
原标题:教你给手机桌面添加透明时钟,好看还实用之前给大家分享了很多手机美化的插件,也深受小伙伴们的喜爱,有电量美化的.手机信号美化的等等,今天给大家带来的是手机时钟美化,效果也是非常精美,如下图. ...