结合js利用画布制作一个时钟
Posted 徐-航
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了结合js利用画布制作一个时钟相关的知识，希望对你有一定的参考价值。
首先 搭建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)
效果图
以上是关于结合js利用画布制作一个时钟的主要内容，如果未能解决你的问题，请参考以下文章