原生JS实现Canvas时钟
HTML中只有一个div包裹一个canvas元素,重点看JS部分。
重点:
- beginPath() 方法在一个画布中开始子路径的一个新的集合。 也就是说,运行到这个函数时,context中止当前的路径,立刻把当前的坐标设置为起点(0,0),开始一条新的路径。
- ctx.save()表示保存save函数之前的状态,ctx.restore()表示获取save保存的状态
- 其他方法参考API
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Clock</title> <style> div { text-align: center; margin-top: 100px; } #clock { border-radius: 50%; box-shadow: 2px 2px 20px #eee; } </style> </head> <body> <div> <canvas id="clock" height="600px" width="600px"></canvas> </div> <script> window.onload = function() { 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 ratio = width / 200; dom.onmouseover = function () { dom.style.boxShadow = "2px 2px 20px #ddd"; } dom.onmouseout = function () { dom.style.boxShadow = "2px 2px 20px #eee"; } function drawBackground() { ctx.save() ctx.translate(r, r); ctx.lineWidth = 6 * ratio; ctx.beginPath(); ctx.arc(0, 0, r-ctx.lineWidth/2, 0, 2 * Math.PI, false); ctx.fillStyle = '#fff' ctx.fill(); var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; ctx.font = 18 * ratio + "px Arial"; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; hourNumbers.forEach(function(number, i) { var rad = 2 * Math.PI / 12 * i; var x = Math.cos(rad) * (r - 30 * ratio); var y = Math.sin(rad) * (r - 30 * ratio); ctx.fillStyle = '#333' ctx.fillText(number, x, y); }); for(var i = 0; i < 60; i++) { var rad = 2 * Math.PI / 60 * i; var x = Math.cos(rad) * (r - 15 * ratio); var y = Math.sin(rad) * (r - 15 * ratio); ctx.beginPath(); if (i % 5 === 0) { ctx.fillStyle = '#666'; ctx.arc(x, y, 1.5 * ratio, 0, 2 * Math.PI, false); } else { ctx.fillStyle = '#666'; ctx.arc(x, y, 1 * ratio, 0, 2 * Math.PI, false); } ctx.fill(); } } function drawHour(hour, minute) { ctx.save(); ctx.beginPath(); var rad = 2 * Math.PI / 12 * hour; var mrad = 2 * Math.PI /12 /60 *minute; ctx.rotate(rad + mrad); ctx.lineWidth = 6 * ratio; ctx.lineCap = 'round'; ctx.moveTo(0, 10 * ratio); ctx.lineTo(0, -r / 2 + 4 * ratio); ctx.stroke(); ctx.restore(); } function drawMinute(minute) { ctx.save(); ctx.beginPath(); var rad = 2 * Math.PI / 60 * minute; ctx.rotate(rad); ctx.lineWidth = 3 * ratio; ctx.lineCap = 'round'; ctx.moveTo(0, 10 * ratio); ctx.lineTo(0, -r / 2 - 4 * ratio); ctx.stroke(); ctx.restore(); } function drawSecond(second) { ctx.save(); ctx.beginPath(); ctx.fillStyle = '#930' var rad = 2 * Math.PI / 60 * second; ctx.rotate(rad); ctx.moveTo(-2 * ratio, 20 * ratio); ctx.lineTo(2 * ratio, 20 * ratio); ctx.lineTo(1, -r / 2 - 12 * ratio); ctx.lineTo(-1, -r / 2 - 12 * ratio); ctx.fill(); ctx.restore(); } function drawDot() { ctx.beginPath(); ctx.fillStyle = '#EEE'; ctx.arc(0, 0, 3 * ratio, 0, 2 * Math.PI, false); ctx.fill(); } function draw() { ctx.clearRect(0, 0, width, height); var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); drawBackground(); drawDot(); drawHour(hour, minute); drawMinute(minute); drawSecond(second); ctx.restore(); } draw(); setInterval(draw, 1000); } </script> </body> </html>