本文實例講述了javascript+HTML5 canvas繪制時鐘功能。分享給大家供大家參考，具體如下：

效果如下：

代碼：

www.jb51.net canvas繪制時鐘

div{text-align:center;margin-top:250px;}

var dom=document.getElementById("clock");

var ctx=dom.getContext("2d");

var width=ctx.canvas.width;

var height=ctx.canvas.height;

var r=width/2;

var rem=width/200;

function drawBackground(){

ctx.save();

ctx.translate(r,r);//重新定義圓點到中心

ctx.beginPath();

ctx.lineWidth=10*rem;

ctx.arc(0,0,r-5*rem,0,Math.PI*2,false);//圓點坐標，起始角0，結束角2π，順時針

ctx.stroke();

var hourNum=[3,4,5,6,7,8,9,10,11,12,1,2];//數組存小時數

ctx.font="18px Arial";

ctx.textAlign="center";

ctx.textBaseline="middle";

hourNum.forEach(function (num,i) {

var rad=2*Math.PI/12*i;//弧度

var x=(r-30*rem)*Math.cos(rad);

var y=(r-30*rem)*Math.sin(rad);

ctx.fillText(num,x,y);

});

for(var i=0;i<60;i++){//畫圓點

var rad=2*Math.PI/60*i;

var x=(r-18*rem)*Math.cos(rad);

var y=(r-18*rem)*Math.sin(rad);

ctx.beginPath();

if(i%5==0){

ctx.fillStyle="#000";

ctx.arc(x,y,2,0,Math.PI*2,false);

}

else{

ctx.fillStyle="#ccc";

ctx.arc(x,y,2,0,Math.PI*2,false);

}

ctx.fill();

}

ctx.closePath();

}

function drawHour(hour,minute){//時針

ctx.save();

ctx.beginPath();

var rad=2*Math.PI/12*hour;

var mrad=2*Math.PI/12/60*minute;

ctx.rotate(rad+mrad);

ctx.lineWidth=6*rem;

ctx.moveTo(0,10*rem);

ctx.lineTo(0,-r/2);

ctx.lineCap="round";

ctx.stroke();

ctx.restore();

}

function drawMinute(minute,second){//分針

ctx.save();

ctx.beginPath();

var rad=2*Math.PI/60*minute;

var srad=2*Math.PI/60/60*second;

ctx.rotate(rad+srad);

ctx.lineWidth=3*rem;

ctx.moveTo(0,10*rem);

ctx.lineTo(0,-r+30*rem);

ctx.lineCap="round";

ctx.stroke();

ctx.restore();

}

function drawSecond(second){//秒針

ctx.save();

ctx.beginPath();

ctx.fillStyle="#c14543";

var rad=2*Math.PI/60*second;

ctx.rotate(rad);

ctx.moveTo(-2*rem,20*rem);

ctx.lineTo(2*rem,20*rem);

ctx.lineTo(1*rem,-r+18*rem);

ctx.lineTo(-1*rem,-r+18*rem);

ctx.fill();

ctx.restore();

}

function drawDot(){//畫中心圓圈

ctx.beginPath();

ctx.fillStyle="#fff";

ctx.arc(0,0,3*rem,0,2*Math.PI,false);

ctx.fill();

}

function draw(){

ctx.clearRect(0,0,width,height);

var now=new Date();

var hour=now.getHours();

var minute=now.getMinutes();

var second=now.getSeconds();

drawBackground();//背景

drawHour(hour,minute);//小時

drawMinute(minute,second);//分鐘

drawSecond(second);//秒鐘

drawDot();//中心圓點

ctx.restore();

}

setInterval(draw,1000);

其中的rem值是為了使canvas畫布大小變化時時鐘的樣式能夠保持

感興趣的朋友可使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試一下運行效果。

PS：這里再為大家推薦幾款時間及日期相關工具供大家參考使用：

希望本文所述對大家JavaScript程序設計有所幫助。

總結

以上是生活随笔為你收集整理的html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。