这期内容当中小编将会给大家带来有关如何在JavaScript中使用Canvas绘制一个圆形时钟效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
具体内容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas Clock</title> <style type="text/css"> div{ text-align: center; margin-top: 250px; } #clock{ border: 1px solid #ccc; } </style> </head> <body> <div> <canvas id="clock" height="200px" width="200px"></canvas> </div> <script type="text/javascript" src="js/clock.js"></script> </body> </html>js
var dom=document.getElementById('clock'); var cxt=dom.getContext("2d"); var width=cxt.canvas.width; var height=cxt.canvas.height; var r=width/2; function drawBackground(){ cxt.save(); cxt.translate(r,r); cxt.beginPath(); cxt.lineWidth=10; cxt.arc(0,0,r-5,0,2*Math.PI,false); cxt.stroke(); cxt.font="18px Arial"; cxt.textAlign='center' cxt.textBaseline='middle' var hourNums=[3,4,5,6,7,8,9,10,11,12,1,2]; hourNums.forEach(function(number,i){ var rad=2*Math.PI/12*i; var x=Math.cos(rad)*(r-30); var y=Math.sin(rad)*(r-30); cxt.fillText(number,x,y); }); for(var i=0;i<60;i++){ var rad=2*Math.PI/60*i; var x=Math.cos(rad)*(r-18); var y=Math.sin(rad)*(r-18); cxt.beginPath(); if(i % 5===0){ cxt.fillStyle="#000" cxt.arc(x,y,2,0,2*Math.PI,false); } else{ cxt.fillStyle="#ccc" cxt.arc(x,y,2,0,2*Math.PI,false); } cxt.fill(); } } function drawHour(hour,minute){ cxt.save(); cxt.beginPath(); var rad=2*Math.PI/12*hour; var mrad=2*Math.PI/12/60*minute cxt.rotate(rad+mrad); cxt.lineWidth=6; cxt.lineCap='round' cxt.moveTo(0,10); cxt.lineTo(0,-r/2); cxt.stroke(); cxt.restore(); } function drawMinute(minute){ cxt.save(); cxt.beginPath(); var rad=2*Math.PI/60*minute; cxt.rotate(rad); cxt.lineWidth=3; cxt.lineCap='round' cxt.moveTo(0,10); cxt.lineTo(0,-r+30); cxt.stroke(); cxt.restore(); } function drawSecond(second){ cxt.save(); cxt.beginPath(); cxt.fillStyle='#c14543' var rad=2*Math.PI/60*second; cxt.rotate(rad); cxt.moveTo(-2,20); cxt.lineTo(2,20); cxt.lineTo(1,-r+18); cxt.lineTo(-1,-r+18); cxt.fill(); cxt.restore(); } function drawDot(){ cxt.beginPath(); cxt.fillStyle='#fff' cxt.arc(0,0,3,0,2*Math.PI,false); cxt.fill(); } function draw(){ cxt.clearRect(0,0,width,height); var now=new Date(); var hour=now.getHours(); var minute=now.getMinutes(); var second=now.getSeconds(); drawBackground(); drawHour(hour,minute); drawMinute(minute); drawSecond(second); drawDot(); cxt.restore(); } draw(); setInterval(draw,1000);上述就是小编为大家分享的如何在JavaScript中使用Canvas绘制一个圆形时钟效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
