JS+H5 Canvas实现时钟效果
程序员文章站
2023-09-02 15:47:37
用javascript+canvas来实现最简单的时钟效果,供大家参考,具体内容如下
效果图:
先看html代码:
<...
用javascript+canvas来实现最简单的时钟效果,供大家参考,具体内容如下
效果图:
先看html代码:
<html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/demo3.js" ></script> </head> <body> <canvas id = "canvas"></canvas> </body> </html>
javascript代码:
var canvas,context; function draw(){//定义划时钟的方法 var data = new date(); var hhoure = data.gethours(); var mmin = data.getminutes(); var ssec = data.getseconds(); var hvalue = (hhoure*30+mmin/2-90)*math.pi/180; var mvalue = (mmin*6-90)*math.pi/180; var svalue = (ssec*6 -90)*math.pi/180; var x = 200,y = 200,r = 150; context.clearrect(0,0,canvas.width,canvas.height); context.moveto(x,y); context.arc(x,y,r,0,6*math.pi/180,false); // context.beginpath(); context.linewidth = 1; for(var i = 0;i<60;i++){ context.moveto(x,y); context.arc(x,y,r,6*i*math.pi/180,6*(i+1)*math.pi/180,false); } context.closepath(); context.stroke(); // context.beginpath(); context.fillstyle = "white"; context.moveto(x,y); context.arc(x,y,r/1.1,-0,2*math.pi,false); context.closepath(); context.fill(); // context.beginpath(); context.linewidth = 3; for(var i = 0;i<12;i++){ context.moveto(x,y); context.arc(x,y,r,30*i*math.pi/180,30*(i+1)*math.pi,false); } context.closepath(); context.stroke(); // context.beginpath(); context.fillstyle = "white"; context.moveto(x,y); context.arc(x,y,r/1.12,0,2*math.pi,false); context.closepath(); context.fill(); context.beginpath(); context.fillstyle = "black"; context.moveto(x,y); context.arc(x,y,r/30,0,2*math.pi,false); context.fill(); // context.beginpath(); context.linewidth = 5; context.moveto(x,y); context.arc(x,y,r/2.5,hvalue,hvalue,false); context.stroke(); // context.beginpath(); context.linewidth = 3; context.moveto(x,y); context.arc(x,y,r/2,mvalue,mvalue,false); context.stroke(); // context.beginpath(); context.linewidth = 2; context.moveto(x,y); context.arc(x,y,r/1.6,svalue,svalue,false); context.stroke(); } window.onload = function(){ canvas = document.getelementbyid('canvas'); context = canvas.getcontext('2d'); canvas.height = 500; canvas.width = 500; setinterval(draw,1000); draw(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: linux shell字母转换写法
下一篇: linux添加开机启动项的方法介绍