用Canvas绘制一个钟表

Posted Rcyan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用Canvas绘制一个钟表相关的知识,希望对你有一定的参考价值。

效果图:

<html>
<head></head>
<body> <canvas id="canvas1"height="500px"width="500px">您的浏览器不支持canvas标签。</canvas> <script> var c=document.getElementById("canvas1"); var clock=c.getContext("2d"); function drawclock(){ //清除画布,每画一次就要清除上一次的 clock.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; //获取的时间为24小时的(),需要转换为12小时的(小时) hour=hour>12?hour-12:hour;//hour是否大于12,如果大于则hour=hour-12否则hour=hour。 //表盘 clock.lineWidth=10; clock.strokeStyle="#41216e"; clock.beginPath(); clock.arc(250,250,100,0,360,false); clock.closePath(); clock.stroke(); //时刻度,12个,所以用for循环来画 for(var i=0;i<12;i++){ clock.save(); clock.lineWidth=6; clock.strokeStyle="#6f3a81"; //先设置(0,0)点 clock.translate(250,250); //再设置旋转角度 clock.rotate(i*30*Math.PI/180); clock.beginPath(); clock.moveTo(0,-93); clock.lineTo(0,-80); clock.stroke(); clock.closePath(); clock.restore(); } //分刻度 for(var j=0;j<60;j++){ clock.save(); clock.lineWidth=4; clock.strokeStyle="#6f3a81"; clock.translate(250,250); clock.rotate(j*6*Math.PI/180); clock.beginPath(); clock.moveTo(0,-93); clock.lineTo(0,-85); clock.stroke(); clock.closePath(); clock.restore(); } //时针 clock.save(); clock.lineWidth=6; clock.strokeStyle="#170523"; clock.translate(250,250); clock.rotate(hour*30*Math.PI/180); clock.beginPath(); clock.moveTo(0,-40); clock.lineTo(0,10); clock.lineCap="round"; clock.closePath(); clock.stroke(); clock.restore(); //分针 clock.save(); clock.lineWidth=4; clock.strokeStyle="#170523"; clock.translate(250,250); clock.rotate(min*6*Math.PI/180); clock.beginPath(); clock.moveTo(0,-58); clock.lineTo(0,15); clock.closePath(); clock.stroke(); clock.restore(); //秒针 clock.save(); clock.lineWidth=2; clock.strokeStyle="#c582ba"; clock.translate(250,250); clock.rotate(sec*6*Math.PI/180); clock.beginPath(); clock.moveTo(-70,0); clock.lineTo(16,0); clock.stroke(); clock.closePath(); //画出时针,分针,秒针的交叉点 clock.beginPath(); clock.fillStyle="black"; clock.arc(0,0,5,0,360); clock.arc(-60,0,2.5,0,360); clock.fill(); clock.closePath(); clock.stroke(); clock.restore(); } //使用setInterval一秒钟调用一次 setInterval(drawclock,1000); </body> </script> </html>

 

以上是关于用Canvas绘制一个钟表的主要内容,如果未能解决你的问题,请参考以下文章

微信新年代码钟表怎么弄

HarmonyOS-基于canvas绘制复古钟表

canvas钟表

canvas 画一个钟表

Flutter-自定义之钟表

Flutter-自定义之钟表