摘要：明天教大家写一个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仓库间接去下载或者复制获取：https://gitee.com/aurora-in-w...
点击关注，第一工夫理解华为云陈腐技术~