這篇文章主要介紹了HTML5中的canvas如何繪制鐘表的方法的相關資料，小編覺得HTML真的是越來越強大的，現在分享給大家，也給大家做個參考。對HTML的小伙伴們可以一起跟隨小編過來看看吧

本文介紹了canvas如何繪制鐘表的方法，分享給大家，具體如下：

效果圖為

上代碼：

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

var year,month,day,hour,second,minute;

// 繪制表盤

function drawClockPie(){

ctx.beginPath();

ctx.lineWidth = 2;

ctx.strokeStyle = '#333';

ctx.arc(150,150,146,0,2*Math.PI);

ctx.stroke();

ctx.closePath();

ctx.beginPath();

ctx.arc(150,150,6,0,2*Math.PI);

ctx.fillStyle = 'red';

ctx.fill();

ctx.closePath();

}

// 繪制時刻度

function drawClockHours(){

for(var i = 0,l = 12; i < 12; i++){

ctx.save();

ctx.translate(150,150);

ctx.rotate(i*1/12*2*Math.PI);

ctx.beginPath();

ctx.lineWidth = 5;

ctx.strokeStyle = '#333';

ctx.moveTo(0,-140);

ctx.lineTo(0,-125);

ctx.stroke();

ctx.closePath();

ctx.restore();

}

}

// 繪制分刻度

function drawClockMins(){

for(var i = 0,l = 60; i < 60; i++){

ctx.save();

ctx.translate(150,150);

ctx.rotate(i*1/60*2*Math.PI);

ctx.beginPath();

ctx.lineWidth = 3;

ctx.strokeStyle = '#333';

ctx.moveTo(0,-140);

ctx.lineTo(0,-133);

ctx.stroke();

ctx.closePath();

ctx.restore();

}

}

// 繪制時針

function drawHourPin(){

ctx.save();

ctx.translate(150,150);

ctx.rotate((hour*60*60+minute*60+second)/(12*60*60)*2*Math.PI);

ctx.beginPath();

ctx.strokeStyle = '#333';

ctx.lineWidth = 3;

ctx.moveTo(0,0);

ctx.lineTo(0,-40);

ctx.stroke();

ctx.closePath();

ctx.restore();

}

// 繪制分針

function drawMinPin(){

ctx.save();

ctx.translate(150,150);

ctx.rotate((minute*60+second)/(60*60)*2*Math.PI);

ctx.beginPath();

ctx.strokeStyle = '#333';

ctx.lineWidth = 2;

ctx.moveTo(0,0);

ctx.lineTo(0,-60);

ctx.stroke();

ctx.closePath();

ctx.restore();

}

// 繪制秒針

function drawSecPin(){

ctx.save();

ctx.translate(150,150);

ctx.rotate(second/60*2*Math.PI);

ctx.beginPath();

ctx.strokeStyle = 'red';

ctx.lineWidth = 1;

ctx.moveTo(0,0);

ctx.lineTo(0,-80);

ctx.stroke();

ctx.closePath();

ctx.restore();

}

// 繪制時間文字

function drawText(){

hour = hour >= 12 ? hour - 12 : hour;

var time = '現在是' + year + '年' + month +

'月' + day + '日' + hour + '時' + minute +

'分' + second + '秒';

ctx.font = '15px 黑體';

ctx.fillText(time,24,350);

}

// 獲取時間

function getTimes(){

var date = new Date();

year = date.getFullYear();

month = date.getMonth() + 1;

day = date.getDate();

hour = date.getHours();

minute = date.getMinutes();

second = date.getSeconds();

}

setInterval(function(){

ctx.clearRect(0,0,600,600);

drawClockPie();

drawClockHours();

drawClockMins();

getTimes();

drawText();

drawHourPin();

drawMinPin();

drawSecPin();

},1000);

注：

當然時間也可以不用這樣每隔一秒就獲取，直接獲取一次按秒遞增就行。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

相關推薦：

總結

以上是生活随笔為你收集整理的php画钟,canvas如何绘制钟表的方法_html5教程技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

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