這篇文章主要介紹了HTML5中的canvas如何繪制鐘表的方法的相關(guān)資料，小編覺(jué)得HTML真的是越來(lái)越強(qiáng)大的，現(xiàn)在分享給大家，也給大家做個(gè)參考。對(duì)HTML的小伙伴們可以一起跟隨小編過(guò)來(lái)看看吧

本文介紹了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();

}

// 繪制時(shí)刻度

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();

}

}

// 繪制時(shí)針

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();

}

// 繪制時(shí)間文字

function drawText(){

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

var time = '現(xiàn)在是' + year + '年' + month +

'月' + day + '日' + hour + '時(shí)' + minute +

'分' + second + '秒';

ctx.font = '15px 黑體';

ctx.fillText(time,24,350);

}

// 獲取時(shí)間

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);

注：

當(dāng)然時(shí)間也可以不用這樣每隔一秒就獲取，直接獲取一次按秒遞增就行。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持PHP中文網(wǎng)。

相關(guān)推薦：

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。