如何使用HTML5 Canvas制作时钟
如何使用HTML5 Canvas制作时钟
发布时间：2021-01-30 14:39:46 来源：高防服务器网 阅读：102 作者：小新 栏目：web开发
这篇文章给大家分享的是有关如何使用HTML5 Canvas制作时钟的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
用HTML5 Canvas 制作的时钟，看着挺简单的，但其中写起来还是有很多小的问题的，感兴趣的小伙伴们可以参考一下
代码如下：
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 时钟</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <style> .clocks { height: 500px; margin: 25px auto; position: relative; width: 500px; } </style> </head> <body> <header> <h3>HTML5 时钟</h3> </header> <p class="clocks"> <canvas id="canvas" width="500" height="500"></canvas> </p> </body> </html>
[JavaScript]代码
// inner variables var canvas, ctx; var clockRadius = 250; var clockImage; // draw functions : function clear() { // clear canvas function ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); } function drawScene() { // main drawScene function clear(); // clear canvas // get current time var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); hours = hours > 12 ? hours - 12 : hours; var hour = hours + minutes / 60; var minute = minutes + seconds / 60; // save current context ctx.save(); // draw clock image (as background) ctx.drawImage(clockImage, 0, 0, 500, 500); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.beginPath(); // draw numbers ctx.font = '36px Arial'; ctx.fillStyle = '#000'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; for (var n = 1; n <= 12; n++) { var theta = (n - 3) * (Math.PI * 2) / 12; var x = clockRadius * 0.7 * Math.cos(theta); var y = clockRadius * 0.7 * Math.sin(theta); ctx.fillText(n, x, y); } // draw hour ctx.save(); var theta = (hour - 3) * 2 * Math.PI / 12; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -5); ctx.lineTo(-15, 5); ctx.lineTo(clockRadius * 0.5, 1); ctx.lineTo(clockRadius * 0.5, -1); ctx.fill(); ctx.restore(); // draw minute ctx.save(); var theta = (minute - 15) * 2 * Math.PI / 60; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -4); ctx.lineTo(-15, 4); ctx.lineTo(clockRadius * 0.8, 1); ctx.lineTo(clockRadius * 0.8, -1); ctx.fill(); ctx.restore(); // draw second ctx.save(); var theta = (seconds - 15) * 2 * Math.PI / 60; ctx.rotate(theta); ctx.beginPath(); ctx.moveTo(-15, -3); ctx.lineTo(-15, 3); ctx.lineTo(clockRadius * 0.9, 1); ctx.lineTo(clockRadius * 0.9, -1); ctx.fillStyle = '#0f0'; ctx.fill(); ctx.restore(); ctx.restore(); } // initialization $(function(){ canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); // var width = canvas.width; // var height = canvas.height; clockImage = new Image(); clockImage.src = 'http://static.oschina.net/uploads/space/2012/0712/125855_nnla_89964.png'; setInterval(drawScene, 1000); // loop drawScene });
感谢各位的阅读！关于“如何使用HTML5 Canvas制作时钟”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[