html5 canvas實(shí)現(xiàn)圓形時(shí)鐘代碼分享
來(lái)源:易賢網(wǎng) 閱讀:1521 次 日期:2016-07-11 11:09:48
溫馨提示:易賢網(wǎng)小編為您整理了“html5 canvas實(shí)現(xiàn)圓形時(shí)鐘代碼分享”,方便廣大網(wǎng)友查閱!

html5canvas實(shí)現(xiàn)的時(shí)鐘,大家參考使用吧

代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML CLOCK</title>

</head>

<body>

<canvas width="500" height="500" id="clock">

你的瀏覽器不支持canvas標(biāo)簽,時(shí)針顯示不出來(lái)哦!

</canvas>

<script type="text/javascript">

//畫布背景顏色

var clockBackGroundColor = "#ABCDEF";

//時(shí)針顏色

var hourPointColor = "#000";

//時(shí)針粗細(xì)

var hourPointWidth = 7;

//時(shí)針長(zhǎng)度

var hourPointLength = 100;

//分針顏色

var minPointColor = "#000";

//分針粗細(xì)

var minPointWidth = 5;

//分針長(zhǎng)度

var minPointLength = 150;

//秒針顏色

var secPointColor = "#F00";

//秒針粗細(xì)

var secPointWidth = 3;

//秒針長(zhǎng)度

var secPointLength = 170;

//表盤顏色

var clockPanelColor = "#ABCDEF";

//表盤刻度顏色

var scaleColor = "#000";

//表盤大刻度寬度 3 6 9 12

var scaleBigWidth = 9;

//表盤大刻度的長(zhǎng)度

var scaleBigLength = 15;

//表盤小刻度的寬度

var scaleSmallWidth = 5;

//表盤小刻度的長(zhǎng)度

var scaleSmallLength = 10;

//圓心顏色

var centerColor = 'red';

//時(shí)鐘畫布

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

clock.style.background = clockBackGroundColor;

//時(shí)針畫布的作圖環(huán)境(畫板)

var panel = clock.getContext('2d');

//畫線

/**

*畫線段

*

*

*/

function drowLine(p,width,color,startX,startY,endX,endY,ran,cX,cY){

//保存?zhèn)魅氲漠嫲?,相?dāng)于每次作畫新開(kāi)一個(gè)圖層

p.save();

//設(shè)置畫筆寬度

p.lineWidth = width;

//設(shè)置畫筆顏色

p.strokeStyle = color;

//新開(kāi)啟作圖路徑,避免和之前畫板上的內(nèi)容產(chǎn)生干擾

p.beginPath();

p.translate(cX,cY);

//旋轉(zhuǎn)

p.rotate(ran);

//移動(dòng)畫筆到開(kāi)始位置

p.moveTo(startX,startY);

//移動(dòng)畫筆到結(jié)束位置

p.lineTo(endX,endY);

//畫線操作

p.stroke();

//關(guān)閉作圖路徑,避免和之后在畫板上繪制的內(nèi)容產(chǎn)生干擾

p.closePath();

//在傳入的畫板對(duì)象上覆蓋圖層

p.restore();

}

/**

*畫水平線

*/

function drowHorizontalLine(p,width,length,color,startX,startY,ran,cX,cY){

drowLine(p,width,color,startX,startY,startX+length,startY,ran,cX,cY);

/**

*畫圈圈

*/

function drowCircle(p,width,color,centreX,centreY,r){

p.save();

//設(shè)置畫筆寬度

p.lineWidth = width;

//設(shè)置畫筆顏色

p.strokeStyle = color;

//新開(kāi)啟作圖路徑,避免和之前畫板上的內(nèi)容產(chǎn)生干擾

p.beginPath();

//畫圈圈

p.arc(centreX,centreY,r,0,360,false);

//畫線操作

p.stroke();

//關(guān)閉作圖路徑,避免和之后在畫板上繪制的內(nèi)容產(chǎn)生干擾

p.closePath();

//在傳入的畫板對(duì)象上覆蓋圖層

p.restore();

}

function drowPoint(p,width,color,centreX,centreY,r){

p.save();

//設(shè)置畫筆寬度

p.lineWidth = width;

//設(shè)置畫筆顏色

p.fillStyle = color;

//新開(kāi)啟作圖路徑,避免和之前畫板上的內(nèi)容產(chǎn)生干擾

p.beginPath();

//畫圈圈

p.arc(centreX,centreY,r,0,360,false);

//畫線操作

p.fill();

//關(guān)閉作圖路徑,避免和之后在畫板上繪制的內(nèi)容產(chǎn)生干擾

p.closePath();

//在傳入的畫板對(duì)象上覆蓋圖層

p.restore();

}

function drowScales(p){

//畫小刻度

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

drowHorizontalLine(p,scaleSmallWidth,scaleSmallLength,scaleColor,195-scaleSmallLength,0,i*6*Math.PI/180,250,250);

}

//畫大刻度

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

drowHorizontalLine(p,i%3==0?scaleBigWidth*1.2:scaleBigWidth,i%3==0?scaleBigLength*1.2:scaleBigLength,scaleColor,195-scaleBigLength,0,i*30*Math.PI/180,250,250);

//可以添加數(shù)字刻度

}

}

function drowHourPoint(p,hour){

drowHorizontalLine(p,hourPointWidth,hourPointLength,hourPointColor,-10,0,(hour-3)*30*Math.PI/180,250,250);

}

function drowMinPoint(p,min){

drowHorizontalLine(p,minPointWidth,minPointLength,minPointColor,-15,0,(min-15)*6*Math.PI/180,250,250);

}

function drowSecPoint(p,sec){

drowHorizontalLine(p,secPointWidth,secPointLength,secPointColor,-15,0,(sec-15)*6*Math.PI/180,250,250);

}

function drowClock(){

panel.clearRect(0,0,500,500);

panel.fillText("",10,20);

panel.fillText("<a ,10,40</a>);

var date = new Date();

var sec = date.getSeconds();

var min = date.getMinutes();

var hour = date.getHours() + min/60;

drowCircle(panel,7,'blue',250,250,200);

drowScales(panel);

drowHourPoint(panel,hour);

drowMinPoint(panel,min);

drowSecPoint(panel,sec);

drowPoint(panel,1,centerColor,250,250,7);

//drowHorizontalLine(panel,10,10,'red',-5,0,0,250,250);

}

//drowHorizontalLine(panel,7,30,'#F00',0,0,Math.PI,250,250);

drowClock();

setInterval(drowClock,1000);

function save(){

var image = clock.toDataURL("image/png").replace("image/png", "image/octet-stream"); 

location.href=image;

}

</script>

</body>

</html>

更多信息請(qǐng)查看網(wǎng)頁(yè)制作
易賢網(wǎng)手機(jī)網(wǎng)站地址:html5 canvas實(shí)現(xiàn)圓形時(shí)鐘代碼分享
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!
相關(guān)閱讀網(wǎng)頁(yè)制作

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)