【canvas 动态时钟】

xiaoxiao2022-07-07 179

画一个动态时钟,显示当前时间 <!DOCTYPE html> <html> <body> <canvas id="canvas" width="350" height="350" style="border:1px solid"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> function clock(){ var now = new Date();//创建一个时间对象 var ctx = document.getElementById('canvas').getContext('2d'); ctx.save();//保存状态栈1 ctx.clearRect(0,0,350,350); //清空画布 //ctx.scale(0.4,0.4);缩小整个图形,根据需要使用 ctx.translate(180,180);//移动原点到(180,180) ctx.rotate(-Math.PI/2);//逆时针旋转90° ctx.strokeStyle = "black";//绘线颜色,黑色 ctx.fillStyle = "white";//填充颜色白色 ctx.lineWidth = 5;//线宽 5 ctx.lineCap = "square";//线帽为正方形 ctx.save();//保存状态,栈2 原点为(180,180) // 12个表示小时的线段 Hour marks for (var i=0;i<12;i++){ ctx.beginPath();//新建路径 ctx.rotate(Math.PI/6);//顺时针旋转30° ctx.moveTo(100,0);//起始点 ctx.lineTo(120,0);//终点 ctx.stroke();//绘线 } // (60-12)=48个表示分针的线段 Minute marks ctx.restore();//恢复状态,当前状态 = 状态2 = 原点=(180,180) ctx.save();//保存状态2=栈2 ctx.lineWidth = 5; for (i=0;i<60;i++){ if (i%5!=0) {//当i对5的余数,不为0时,5的倍数,余数为0时,正好是12个时针的位置,不需要画了,不加这一句,效果也区别不大 ctx.beginPath(); ctx.moveTo(117,0); ctx.lineTo(120,0); ctx.stroke(); } ctx.rotate(Math.PI/30); } ctx.restore();//恢复状态 var sec = now.getSeconds();//获得当前时间的秒 var min = now.getMinutes();//获得当前时间的分 var hr = now.getHours();//获得当前时间的小时 hr = hr>=12 ? hr-12 : hr;//三目运算符,hr >=12 ？是否成立成立执行后面的 hr-12 不成立执行:后面的hr 再把值赋给 hr；运算符的优先级先执行三目在赋值给hr ctx.fillStyle = "black"; // 时针转动 write Hours ctx.save(); ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) ctx.lineWidth = 14; ctx.beginPath(); ctx.moveTo(-20,0); ctx.lineTo(80,0); ctx.stroke(); ctx.restore(); // 分针转动 write Minutes ctx.save(); ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(-28,0); ctx.lineTo(112,0); ctx.stroke(); ctx.restore(); // 秒针转动Write seconds ctx.save(); ctx.rotate(sec * Math.PI/30); ctx.strokeStyle = "#D40000"; ctx.fillStyle = "#D40000"; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(-30,0); ctx.lineTo(83,0); ctx.stroke(); ctx.beginPath(); ctx.arc(0,0,10,0,Math.PI*2,true); ctx.fill(); ctx.beginPath(); ctx.arc(95,0,10,0,Math.PI*2,true); ctx.stroke(); ctx.fillStyle = "rgba(0,0,0,0)"; ctx.arc(0,0,3,0,Math.PI*2,true); ctx.fill(); ctx.restore(); ctx.beginPath(); ctx.lineWidth = 14; ctx.strokeStyle = '#325FA2'; ctx.arc(0,0,142,0,Math.PI*2,true); ctx.stroke(); ctx.restore(); window.requestAnimationFrame(clock); } window.requestAnimationFrame(clock); </script> </body> </html>

参考文档: MDN canvas 教程

感谢：♥♥♥ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 O(∩_∩)O哈哈~

转载请注明出处 ,Thanks♪(･ω･)ﾉ

作者：Hey_Coder来源：原文：https://blog.csdn.net/VickyTsai/article/details/90450946

最新回复(0)