html画表盘随时间转动,Html5画钟表盘/指针实时跳动

最新推荐文章于 2025-03-21 20:53:54 发布

评述员詹俊

最新推荐文章于 2025-03-21 20:53:54 发布

阅读量457

点赞数

文章标签： html画表盘随时间转动

这篇博客详细介绍了如何使用JavaScript在canvas上绘制一个圆形钟表，并实现时、分、秒指针的实时动画效果。通过drawCircle、drawScale和drawPointer等函数，结合requestAnimFrame进行平滑动画更新，展示了前端开发中动态图形的创建技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Clock in canvas

drawCircle(ctx, point, r);varclockPointer=$(‘.clockPointer‘, container).get(0);varctxPointer=clockPointer.getContext(‘2d‘);varrun= function() {

drawPointer(ctxPointer, point, r,newDate());

requestAnimFrame(run);

}

run();

})functiondrawCircle(ctx, point, r) {

ctx.beginPath();

ctx.arc(point.X, point.Y, r,0, Math.PI* 2,true);

ctx.stroke();

ctx.beginPath();

ctx.arc(point.X, point.Y,4,0, Math.PI* 2,true);

ctx.fillStyle= "#ccc";

ctx.fill();

ctx.closePath();for(vari= 0; i< 60; i++) {

drawScale(ctx, point, r,5, i);

}

}functiondrawScale(ctx, point, r, len, scale) {varangle= 360 *scale/ 60 * 2 *Math.PI/ 360

if(scale% 5 == 0) {

len=len+ 3ctx.lineWidth= 3;

}else{

ctx.lineWidth= 1;

}varsX=point.X-(r-len)*Math.sin(angle);varsY=point.Y-(r-len)*Math.cos(angle);vareX=point.X-r*Math.sin(angle);vareY=point.Y-r*Math.cos(angle);

ctx.beginPath();

ctx.strokeStyle= "#ccc";

ctx.moveTo(sX, sY);

ctx.lineTo(eX, eY);

ctx.stroke();

ctx.closePath();

}functiondrawPointer(ctx, point, r, time) {

ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);varhours=time.getHours();varminutes=time.getMinutes();varseconds=time.getSeconds();varminSec=time.getMilliseconds();varangleS= 2 *Math.PI*(60 * 1000 -seconds* 1000 -minSec)/(60 * 1000);varesX=point.X-(r- 5)*Math.sin(angleS);varesY=point.Y-(r- 5)*Math.cos(angleS);vareSec={ X: esX, Y: esY };

drawLine(ctx, point, eSec,1);varangleM= 2 *Math.PI*(60 * 60 -minutes* 60 -seconds)/(60 * 60);varemX=point.X-(r- 10)*Math.sin(angleM);varemY=point.Y-(r- 10)*Math.cos(angleM);vareMinu={ X: emX, Y: emY };

drawLine(ctx, point, eMinu,2);varangleH= 2 *Math.PI*((24 * 60 * 60 -hours* 60 * 60 -minutes* 60 -seconds)%(12 * 60 * 60))/(12 * 60 * 60);varehX=point.X-(r- 15)*Math.sin(angleH);varehY=point.Y-(r- 15)*Math.cos(angleH);vareHour={ X: ehX, Y: ehY };

drawLine(ctx, point, eHour,3);

}functiondrawLine(ctx, pointS, pointE, lineWidth) {

ctx.lineWidth=lineWidth;

ctx.beginPath();

ctx.strokeStyle= "#808080";

ctx.moveTo(pointS.X, pointS.Y);

ctx.lineTo(pointE.X, pointE.Y);

ctx.stroke();

ctx.closePath();

}

window.requestAnimFrame=(function() {returnwindow.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||

function(run) {

window.setTimeout(run,16);

};

})();

/*background: orange;*/margin:0 auto;position:relative;

}canvas{position:absolute;

}