使用canvas实现时钟
效果图：
代码如下，复制即可使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas时钟</title> <style> div { text-align: center; margin-top: 15%; } </style> </head> <body> <div> <canvas id="clock" height="200px" width="200px"></canvas> </div> <script> var dom = document.getElementById('clock'); var ctx = dom.getContext('2d'); var width = ctx.canvas.width; var height = ctx.canvas.height; var r = width / 2; var rem = width / 200; // 画圆 function drawBackground() { ctx.save();//save() 保存当前环境的状态 ctx.translate(r, r);//translate() 重新映射画布上的 (0,0) 位置 ctx.beginPath();//beginPath() 起始一条路径，或重置当前路径 ctx.lineWidth = 10 * rem;//lineWidth 设置或返回当前的线条宽度 ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false) //arc() 创建弧/曲线（用于创建圆形或部分圆） ctx.stroke();//stroke() 绘制已定义的路径 //12个点 var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; ctx.font = 18 * rem + "px arial"; ctx.textAlign = "center";//textAlign 设置或返回文本内容的当前对齐方式 ctx.textBaseline = "middle";//textBaseline 设置或返回在绘制文本时使用的当前文本基线 hourNumbers.forEach(function (number, i) { var rad = 2 * Math.PI / 12 * i; var x = Math.cos(rad) * (r - 30 * rem); var y = Math.sin(rad) * (r - 30 * rem); ctx.fillText(number, x, y);//fillText() 在画布上绘制“被填充的”文本 }); //60个点 for (var i = 0; i < 60; i++) { var rad = 2 * Math.PI / 60 * i; var x = Math.cos(rad) * (r - 18 * rem); var y = Math.sin(rad) * (r - 18 * rem); ctx.beginPath(); if (i % 5 === 0) { ctx.fillStyle = "red"; ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false); } else { ctx.fillStyle = "#eee"; ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false); } ctx.fill(); } } // 时针 function drawHour(hour, minute) { ctx.save(); ctx.beginPath();//beginPath() 起始一条路径，或重置当前路径 var rad = 2 * Math.PI / 12 * hour; var mrad = 2 * Math.PI / 12 / 60 * minute; ctx.rotate(rad + mrad); ctx.lineWidth = 6 * rem; ctx.lineCap = 'round'; ctx.moveTo(0, 10 * rem); ctx.lineTo(0, -r / 2); ctx.stroke(); ctx.restore(); } //分针 function drawMinute(minute) { ctx.save(); ctx.beginPath(); var rad = 2 * Math.PI / 60 * minute; ctx.rotate(rad); ctx.lineWidth = 3 * rem; ctx.lineCap = 'round'; ctx.moveTo(0, 10 * rem); ctx.lineTo(0, -r + 30 * rem); ctx.stroke(); ctx.restore(); } //秒针 function drawSecond(second) { ctx.save(); ctx.beginPath(); ctx.fillStyle = "red"; var rad = 2 * Math.PI / 60 * second; ctx.rotate(rad); ctx.moveTo(-2 * rem, 20 * rem);//moveTo() 把路径移动到画布中的指定点，不创建线条 ctx.lineTo(2 * rem, 20 * rem);//lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条 ctx.lineTo(1, -r + 18 * rem); ctx.lineTo(-1, -r + 18 * rem); ctx.fill();//fill() 填充当前绘图（路径） ctx.restore(); } // 圆点 function drawDot() { ctx.beginPath(); ctx.fillStyle = "write"; ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI, false); ctx.fill(); } function draw() { ctx.clearRect(0, 0, width, height);//clearRect() 在给定的矩形内清除指定的像素 var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); drawBackground(); drawHour(hour, minute); drawMinute(minute); drawSecond(second); drawDot(); ctx.restore();//restore() 返回之前保存过的路径状态和属性 } draw(); setInterval(draw, 1000); </script> </body> </html>
如有错误，欢迎联系我改正，非常感谢！！！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/12326.html