html5 canvas實(shí)現(xiàn)圓形時(shí)鐘代碼分享

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁制作

來源：易賢網(wǎng) 閱讀：1847 次日期：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>

<title>HTML CLOCK</title>

</head>

<body>

你的瀏覽器不支持canvas標(biāo)簽，時(shí)針顯示不出來哦！

</canvas>

//畫布背景顏色

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)于每次作畫新開一個(gè)圖層

p.save();

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

p.lineWidth = width;

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

p.strokeStyle = color;

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

p.beginPath();

p.translate(cX,cY);

//旋轉(zhuǎn)

p.rotate(ran);

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

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;

//新開啟作圖路徑，避免和之前畫板上的內(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;

//新開啟作圖路徑，避免和之前畫板上的內(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)頁制作

上一篇：html5的canvas實(shí)現(xiàn)3d雪花飄舞效果

下一篇：html5 css3網(wǎng)站菜單實(shí)現(xiàn)代碼

易賢網(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)頁制作

使用CSS制作立體導(dǎo)航欄10月30日

用純CSS3實(shí)現(xiàn)網(wǎng)頁中常見的小箭頭10月30日

有關(guān)HTML5中背景音樂的自動(dòng)播放功能10月30日

HTML5、Select下拉框右邊加圖標(biāo)的實(shí)現(xiàn)代碼(增進(jìn)用戶體驗(yàn))10月30日

html5實(shí)現(xiàn)圖片轉(zhuǎn)圈的動(dòng)畫效果——讓頁面動(dòng)起來10月30日

html5清空畫布方法(三種)10月30日

HTML實(shí)現(xiàn)移動(dòng)端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務(wù)器10月30日

Dreamweaver怎么設(shè)計(jì)彩色邊框的表格?10月30日

Dreamweaver怎么給個(gè)人簡(jiǎn)歷添加照片并排版?10月30日

基于HTML5的WebGL實(shí)現(xiàn)json和echarts圖表展現(xiàn)在同一個(gè)界面10月30日

解決HTML5手機(jī)端頁面縮放的問題10月30日

利用純CSS實(shí)現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁排版09月29日

HTML5+CSS3 實(shí)現(xiàn)靈動(dòng)的動(dòng)畫 TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動(dòng)畫技巧與細(xì)節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026國(guó)考·省考課程試聽報(bào)名

報(bào)班類型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合