canvas :原生javascript编写动态时钟
程序员文章站
2022-04-13 15:25:39
canvas :原生javascript编写动态时钟 此时针是以画布的中心为圆心; g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,width/2) 绘制表盘 function jiang(){ r = width/2 g.clearRect(0 ......
此时针是以画布的中心为圆心;
g.translate(width/2,width/2);
此函数是将画布的原点移到(width/2,width/2)
绘制表盘
function jiang(){ r = width/2 g.clearrect(0, 0, 600, 600); g.save(); g.translate(r, r); g.rotate(-math.pi / 2); //分钟刻度线 for(var i = 0; i < 60; i++) {//画60个刻度线 g.beginpath(); g.strokestyle ="white"; g.linewidth = 4; g.moveto(250, 0); g.lineto(240, 0); g.stroke(); g.rotate(math.pi / 30); //每个6deg画一个时钟刻度线 g.closepath(); } //时钟刻度线 for(var i = 0; i < 12; i++) {//画12个刻度线 g.beginpath(); g.strokestyle ="white"; g.linewidth = 8; g.moveto(250, 0); g.lineto(230, 0); g.stroke(); g.rotate(math.pi / 6); //每个30deg画一个时钟刻度 g.closepath(); } }
时针
save和restore必不可少,在这两个函数之间,改变位置不会影响到其他函数,在此段代码中特指rotate,如果没有rotate,可以不用save和restore
一定要加beginpath,免得被其他函数影响
时针和分针秒针不一样,一个30°,还有分针的移动会影响时针的位置
时针运动的原理是画好一条线,然后旋转那条线
function drawhour(hour,minu){ g.save(); g.beginpath(); g.linewidth = 9; var rad = math.pi*2/12*hour; var radminu = math.pi*2/12/60*minu; g.rotate(rad + radminu) g.moveto(-10,0); g.lineto(r/2,0); g.strokestyle = "white"; g.stroke(); g.restore(); }
分针
function drawminu(minu){ g.save(); g.beginpath(); g.linewidth = 6; var radminu = math.pi*2/60*minu; g.rotate(radminu) g.moveto(-16,0); g.lineto(r-100,0); g.strokestyle = "white"; g.stroke(); g.restore(); }
秒针
function drawseco(seco){ g.save(); g.beginpath(); g.linewidth = 3; var radseco = math.pi*2/60*seco; g.rotate(radseco) g.moveto(-25,0); g.lineto(r-80,0); g.strokestyle = "#ff0032"; g.stroke(); g.restore(); }
数字表
function drawnumclock(){ var data = new date(); var sec = data.getseconds(); var min = data.getminutes(); var hour = data.gethours(); g.fillstyle = "white"; g.font = "20px '楷体'"; g.beginpath(); g.rotate(math.pi/2) g.filltext(hour,60,0); g.filltext(":",80,0); g.filltext(min,90,0); g.font = "20px '楷体'"; g.filltext(sec,120,0); }