JS+H5 Canvas实现时钟效果
程序员文章站
2023-12-25 15:59:33
用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();
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。