话不多少，先上效果，哈哈
接下来直接上源码，全部手码，喜欢的记得点个赞哦
代码张的难看？复制下来格式化一下不就好看了么，哈哈
<!DOCTYPE html><html lang=”en”>
<head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <style> canvas { margin-top: 20%; margin-left: 40%; border: 1px solid #eee; } </style></head>
<body> <canvas width=”300px” height=”300px” id=”myc”></canvas> <script> let dom = document.getElementById(‘myc’); let ctx = dom.getContext(‘2d’); let width = ctx.canvas.width; let height = ctx.canvas.height; var r = width / 2; let rem = width/200; function drawBg() { ctx.save(); ctx.translate(r, r); ctx.beginPath(); ctx.lineWidth = 10*rem; ctx.arc(0, 0, r – 5*rem, 0, 2 * Math.PI, false); ctx.stroke();
var hoursArray = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; ctx.font = 18*rem+”px Arial”; ctx.textAlign = ‘center’; ctx.textBaseline = ‘middle’; hoursArray.forEach((number, i) => { let rad = 2 * Math.PI / 12 * i; let x = Math.cos(rad) * (r – 30*rem); let y = Math.sin(rad) * (r – 30*rem); ctx.fillText(number, x, y); });
for (let i = 0; i < 60; i++) { let rad = 2 * Math.PI / 60 * i; let x = Math.cos(rad) * (r – 18*rem); let y = Math.sin(rad) * (r – 18*rem);
ctx.beginPath(); if (i % 5 === 0) { ctx.fillStyle = “#000”; } else { ctx.fillStyle = “#999”; }; ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false); ctx.fill(); } }; function drawHour(hour, minute) { ctx.save(); let rad = 2 * Math.PI / 12 * hour; let mrad = 2 * Math.PI / 12 / 60 * minute; ctx.rotate(rad + mrad); ctx.beginPath(); ctx.lineWidth = 4*rem; ctx.lineCap = “round”; ctx.moveTo(0, 10*rem); ctx.lineTo(0, -r * 3 / 7); ctx.stroke(); ctx.restore(); };
function drawMinute(minute) { ctx.save(); let rad = 2 * Math.PI / 60 * minute; ctx.rotate(rad); ctx.beginPath(); ctx.lineWidth = 2*rem; ctx.lineCap = “round”; ctx.moveTo(0, 10*rem); ctx.lineTo(0, -r * 4 / 7); ctx.stroke(); ctx.restore(); };
function drawSecond(secound) { ctx.save(); ctx.beginPath(); let rad = 2 * Math.PI / 60 * secound; ctx.lineWidth = 1; ctx.fillStyle = “#000”; ctx.rotate(rad); ctx.moveTo(2, 20*rem); ctx.lineTo(-2, 20*rem); ctx.lineTo(-1, -r * 5 / 7); ctx.lineTo(1, -r * 5 / 7); ctx.fill(); ctx.restore(); };
function drawDot() { ctx.beginPath(); ctx.fillStyle = “#fff”; ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false); ctx.fill(); }; setInterval(() => { let now = new Date(); let hour = now.getHours(); let minute = now.getMinutes(); let second = now.getSeconds(); ctx.clearRect(0, 0, width, height);
drawBg(); drawHour(hour, minute); drawMinute(minute); drawSecond(second); drawDot(); ctx.restore(); }, 500); </script></body>
</html>
最后再说一下思路：
1、先画时钟的背景，包括大圆圈，1-12的数字，60个小点点
2、画时针
3、画分针
4、画秒针
5、画中间的小圆点
知识点说明：
1、有些同学对ctx.save()不了解，简单说一下，比如我们在drawBg()方法中使用了translate()对圆点进行了偏移，又对画笔的线条和颜色进行了设置，save()就是保存这些操作前的状态，然后使用restore()就是恢复save()前的状态。/2、这里用到的rem就是画布缩放的比例，比如canvas尺寸改变后，时钟能正常的等比例缩放。
2、计算时钟的坐标的时候需要使用到sin()以及cos()；
3、rad变量计算的是弧度，这里不是角度
4、ctx.clearRect()这个方法就是每次绘制完后清空当前的画布，解决的是秒针绘制后保留路径的问题，如下图：
以上就是canvas入门：canvas画布绘制时钟的全部内容，欢迎大家一起讨论哈
近期评论