溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html5 中怎么利用canvas實現(xiàn)一個圓形時鐘

發(fā)布時間：2021-08-09 15:31:33 來源：億速云 閱讀：119 作者：Leah 欄目：web開發(fā)

這篇文章給大家介紹html5 中怎么利用canvas實現(xiàn)一個圓形時鐘，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML CLOCK</title>
</head>
<body>
<canvas width="500" height="500" id="clock">
 你的瀏覽器不支持canvas標(biāo)簽，時針顯示不出來哦！
</canvas>

<script type="text/javascript">
//畫布背景顏色
var clockBackGroundColor = "#ABCDEF";
//時針顏色
var hourPointColor = "#000";
//時針粗細(xì)
var hourPointWidth = 7;
//時針長度
var hourPointLength = 100;
//分針顏色
var minPointColor = "#000";
//分針粗細(xì)
var minPointWidth = 5;
//分針長度
var minPointLength = 150;
//秒針顏色
var secPointColor = "#F00";
//秒針粗細(xì)
var secPointWidth = 3;
//秒針長度
var secPointLength = 170;
//表盤顏色
var clockPanelColor = "#ABCDEF";
//表盤刻度顏色
var scaleColor = "#000";
//表盤大刻度寬度 3 6 9 12
var scaleBigWidth = 9;
//表盤大刻度的長度
var scaleBigLength = 15;
//表盤小刻度的寬度
var scaleSmallWidth = 5;
//表盤小刻度的長度
var scaleSmallLength = 10;
//圓心顏色
var centerColor = 'red';


//時鐘畫布
var clock = document.getElementById('clock');
clock.style.background = clockBackGroundColor;
//時針畫布的作圖環(huán)境（畫板）
var panel = clock.getContext('2d');


//畫線
/**
*畫線段
*
*
*/
function drowLine(p,width,color,startX,startY,endX,endY,ran,cX,cY){
 //保存?zhèn)魅氲漠嫲?，相?dāng)于每次作畫新開一個圖層
 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);
 //移動畫筆到開始位置
 p.moveTo(startX,startY);
 //移動畫筆到結(jié)束位置
 p.lineTo(endX,endY);
 //畫線操作
 p.stroke();
 //關(guān)閉作圖路徑，避免和之后在畫板上繪制的內(nèi)容產(chǎn)生干擾
 p.closePath();
 //在傳入的畫板對象上覆蓋圖層
 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();
 //在傳入的畫板對象上覆蓋圖層
 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();
 //在傳入的畫板對象上覆蓋圖層
 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 href="http://kemok4.com",10,40">http://kemok4.com",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>

關(guān)于html5 中怎么利用canvas實現(xiàn)一個圓形時鐘就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手