结合js利用画布制作一个时钟 -云博客

结合js利用画布制作一个时钟

# 前端 2024-05-05 15:02 0 46 来源：云博客

首先搭建canvas画布格式：

动态获取画布的宽和高方便变换，利用translate将圆中心坐标改为0 0；

<canvas width="800px" height="800px"></canvas> <script> var canvas=document.querySelector("canvas"); var ctx=canvas.getContext("2d"); var width=ctx.canvas.width; var height=ctx.canvas.height; var r=width/2 ctx.translate(r,r)

第一步绘制表盘：

利用save来保存当前状态 restore返回之前保存过的状态，保证前后不受影响

先用画圆属性arc（）绘制一个圆圈

定义一个数组将时间刻度装起来，用for循环来循环添加到变盘上

首先获取到刻度之间的角度，然后利用三角函数得到刻度的位置，最后利用filltext将文本添加上去

function biao(){ //边框 ctx.save(); ctx.beginPath() ctx.arc(0,0,r-5,0,2*Math.PI,false) ctx.lineWidth=10 ctx.stroke() //时间刻度 var unm=[3,4,5,6,7,8,9,10,11,12,1,2] ctx.font = "18px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle" for(i=0;i<unm.length;i++){ var edg=2*Math.PI/12*i var x=Math.cos(edg)*(r-50) var y=Math.sin(edg)*(r-50) ctx.fillText(unm[i],x,y) } //边刻 for(j=0;j<60;j++){ ctx.beginPath() var rng=2*Math.PI/60*j var x=Math.cos(rng)*(r-30) var y=Math.sin(rng)*(r-30) if(j%5==0){ ctx.fillStyle="black" }else{ ctx.fillStyle="#ccc" } ctx.arc(x,y,2,0,2*Math.PI,false) ctx.fill() } ctx.restore() }

第二步绘制时针：

现获取到每小时之间的弧度

时针是需要跟随分针改变的

所以需要加上分针对时针的影响得弧度才能的到时正真转动的弧度

//时针 function hour(shi,fen){ ctx.save(); ctx.beginPath() var rad=2*Math.PI/12*shi //分对时的影响 var rad1=2*Math.PI/60*fen ctx.rotate(rad+rad1) ctx.lineCap="round"; ctx.lineWidth=6 ctx.moveTo(0,10) ctx.lineTo(0,-r/2) ctx.stroke() ctx.restore() }

第三步绘制分针

//分 function minute(fen){ ctx.save(); ctx.beginPath() var rad=2*Math.PI/60*fen ctx.rotate(rad) ctx.lineCap="round"; ctx.lineWidth=4 ctx.moveTo(0,10) ctx.lineTo(0,-r+120) ctx.stroke() ctx.restore() }

第四步绘制秒针

//秒 function seccond(miao){ ctx.save(); ctx.beginPath() var rad=2*Math.PI/60*miao ctx.rotate(rad) ctx.moveTo(-2,20) ctx.lineTo(2,20) ctx.lineTo(0,-r+70) ctx.lineTo(-2,20) ctx.fillStyle="aquamarine" ctx.fill() ctx.restore() }

第五步调用函数，将时间参数添加进去，利用定时器一秒触发一次

function show(){ ctx.clearRect(-r,-r,width,height) var time=new Date(); var miao=time.getSeconds(); var fen=time.getMinutes(); var shi=time.getHours(); hour(shi,fen) minute(fen) seccond(miao) biao() } setInterval(show,1000)

完整代码

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> canvas{ border: 1px solid black; } </style> </head> <body> <canvas width="800px" height="800px"></canvas> <script> var canvas=document.querySelector("canvas"); var ctx=canvas.getContext("2d"); var width=ctx.canvas.width; var height=ctx.canvas.height; var r=width/2 ctx.translate(r,r) function biao(){ //边框 ctx.save(); ctx.beginPath() ctx.arc(0,0,r-5,0,2*Math.PI,false) ctx.lineWidth=10 ctx.stroke() //时间刻度 var unm=[3,4,5,6,7,8,9,10,11,12,1,2] ctx.font = "18px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle" for(i=0;i<unm.length;i++){ var edg=2*Math.PI/12*i var x=Math.cos(edg)*(r-50) var y=Math.sin(edg)*(r-50) ctx.fillText(unm[i],x,y) } //边刻 for(j=0;j<60;j++){ ctx.beginPath() var rng=2*Math.PI/60*j var x=Math.cos(rng)*(r-30) var y=Math.sin(rng)*(r-30) if(j%5==0){ ctx.fillStyle="black" }else{ ctx.fillStyle="#ccc" } ctx.arc(x,y,2,0,2*Math.PI,false) ctx.fill() } ctx.restore() } //时针 function hour(shi,fen){ ctx.save(); ctx.beginPath() var rad=2*Math.PI/12*shi //分对时的影响 var rad1=2*Math.PI/60*fen ctx.rotate(rad+rad1) ctx.lineCap="round"; ctx.lineWidth=6 ctx.moveTo(0,10) ctx.lineTo(0,-r/2) ctx.stroke() ctx.restore() } //分 function minute(fen){ ctx.save(); ctx.beginPath() var rad=2*Math.PI/60*fen ctx.rotate(rad) ctx.lineCap="round"; ctx.lineWidth=4 ctx.moveTo(0,10) ctx.lineTo(0,-r+120) ctx.stroke() ctx.restore() } //秒 function seccond(miao){ ctx.save(); ctx.beginPath() var rad=2*Math.PI/60*miao ctx.rotate(rad) ctx.moveTo(-2,20) ctx.lineTo(2,20) ctx.lineTo(0,-r+70) ctx.lineTo(-2,20) ctx.fillStyle="aquamarine" ctx.fill() ctx.restore() } function show(){ ctx.clearRect(-r,-r,width,height) var time=new Date(); var miao=time.getSeconds(); var fen=time.getMinutes(); var shi=time.getHours(); hour(shi,fen) minute(fen) seccond(miao) biao() } setInterval(show,1000)