实现canvas圆形时钟效果
分类:实例代码
canvas圆形时钟效果属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它利用canvas实现了圆形时钟效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> </head> <body> <canvas id="clock" width="500" height="500"></canvas> <script> var clock = document.getElementById('clock'); var cxt = clock.getContext('2d'); function drawClock() { //获取时间 cxt.clearRect(0, 0, 500, 500); var now = new Date(); var sec = now.getSeconds(); var min = now.getMinutes(); var hour = now.getHours(); //规格化 hour = hour + min / 60; hour = hour > 12 ? hour - 12 : hour; //表盘 cxt.lineWidth = 10; cxt.strokeStyle = "blue"; cxt.beginPath(); cxt.arc(250, 250, 200, 0, 360, false); cxt.closePath(); cxt.stroke(); //表盘格 for (var i = 0; i < 12; i++) { cxt.save(); cxt.lineWidth = 7; cxt.strokeStyle = "#000"; cxt.translate(250, 250); cxt.rotate(i * 30 * Math.PI / 180); cxt.beginPath(); cxt.moveTo(0, -170); cxt.lineTo(0, -190); cxt.closePath(); cxt.stroke(); cxt.restore(); } for (var i = 0; i < 60; i++) { cxt.save(); cxt.lineWidth = 5; cxt.strokeStyle = "#000"; cxt.translate(250, 250); cxt.rotate(i * 6 * Math.PI / 180); cxt.beginPath(); cxt.moveTo(0, -180); cxt.lineTo(0, -190); cxt.closePath(); cxt.stroke(); cxt.restore(); } //时针 cxt.save(); cxt.lineWidth = 7; cxt.strokeStyle = "#000"; cxt.translate(250, 250); cxt.rotate(hour * 30 * Math.PI / 180); cxt.beginPath(); cxt.moveTo(0, -140); cxt.lineTo(0, 10); cxt.closePath(); cxt.stroke(); cxt.restore(); //分针 cxt.save(); cxt.lineWidth = 5; cxt.strokeStyle = "#000"; cxt.translate(250, 250); cxt.rotate(min * 6 * Math.PI / 180); cxt.beginPath(); cxt.moveTo(0, -160); cxt.lineTo(0, 15); cxt.closePath(); cxt.stroke(); cxt.restore(); //秒针 cxt.save(); cxt.strokeStyle = "red"; cxt.lineWidth = 3; cxt.translate(250, 250); cxt.rotate(sec * 6 * Math.PI / 180); cxt.beginPath(); cxt.moveTo(0, -170); cxt.lineTo(0, 20); cxt.closePath(); cxt.stroke(); cxt.beginPath(); cxt.arc(0, 0, 5, 0, 360, false); cxt.closePath(); cxt.fillStyle = "gray"; cxt.fill(); cxt.stroke(); cxt.beginPath(); cxt.arc(0, -150, 5, 0, 360, false); cxt.closePath(); cxt.fillStyle = "gray"; cxt.fill(); cxt.stroke(); cxt.restore(); } drawClock(); setInterval(drawClock, 1000); </script> </body> </html>
canvas圆形时钟效果,这样的场景在实际项目中还是用的比较多的,关于canvas圆形时钟效果就介绍到这了。