JS+H5 Canvas实现时钟效果

用JavaScript+Canvas来实现最简单的时钟效果，供大家参考，具体内容如下

效果图：

先看HTML代码：

rush:xhtml;"> <Meta charset="UTF-8">

JavaScript代码：

rush:js;"> 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,canvas.width,canvas.height);
context.moveto(x,y);
context.arc(x,y,r,6Math.PI/180,false);
//
context.beginPath();
context.linewidth = 1;
for(var i = 0;i<60;i++){
context.moveto(x,6iMath.PI/180,6(i+1)Math.PI/180,false);
}
context.closePath();
context.stroke();
//
context.beginPath();
context.fillStyle = "white";
context.moveto(x,r/1.1,-0,2Math.PI,false);
context.closePath();
context.fill();
//
context.beginPath();
context.linewidth = 3;
for(var i = 0;i<12;i++){
context.moveto(x,30iMath.PI/180,30(i+1)Math.PI,r/1.12,false);
context.closePath();
context.fill();

context.beginPath();
context.fillStyle = "black";
context.moveto(x,r/30,false);
context.fill();
//
context.beginPath();
context.linewidth = 5;
context.moveto(x,r/2.5,hValue,false);
context.stroke();
//
context.beginPath();
context.linewidth = 3;
context.moveto(x,r/2,mValue,false);
context.stroke();
//
context.beginPath();
context.linewidth = 2;
context.moveto(x,r/1.6,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();
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/js/31418.html