html5 canvas實現(xiàn)圓形時鐘代碼分享
發(fā)布時間：2013-12-25 09:10:03 作者：佚名 
我要評論
我要評論html5canvas實現(xiàn)的時鐘，大家參考使用吧
復制代碼
代碼如下:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML CLOCK</title>
</head>
<body>
<canvas width="500" height="500" id="clock">
你的瀏覽器不支持canvas標簽，時針顯示不出來哦！
</canvas>
<script type="text/javascript">
//畫布背景顏色
var clockBackGroundColor = "#ABCDEF";
//時針顏色
var hourPointColor = "#000";
//時針粗細
var hourPointWidth = 7;
//時針長度
var hourPointLength = 100;
//分針顏色
var minPointColor = "#000";
//分針粗細
var minPointWidth = 5;
//分針長度
var minPointLength = 150;
//秒針顏色
var secPointColor = "#F00";
//秒針粗細
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)魅氲漠嫲澹喈斢诿看巫鳟嬓麻_一個圖層
p.save();
//設置畫筆寬度
p.lineWidth = width;
//設置畫筆顏色
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();
//關閉作圖路徑，避免和之后在畫板上繪制的內(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();
//設置畫筆寬度
p.lineWidth = width;
//設置畫筆顏色
p.strokeStyle = color;
//新開啟作圖路徑，避免和之前畫板上的內(nèi)容產(chǎn)生干擾
p.beginPath();
//畫圈圈
p.arc(centreX,centreY,r,0,360,false);
//畫線操作
p.stroke();
//關閉作圖路徑，避免和之后在畫板上繪制的內(nèi)容產(chǎn)生干擾
p.closePath();
//在傳入的畫板對象上覆蓋圖層
p.restore();
}
function drowPoint(p,width,color,centreX,centreY,r){
p.save();
//設置畫筆寬度
p.lineWidth = width;
//設置畫筆顏色
p.fillStyle = color;
//新開啟作圖路徑，避免和之前畫板上的內(nèi)容產(chǎn)生干擾
p.beginPath();
//畫圈圈
p.arc(centreX,centreY,r,0,360,false);
//畫線操作
p.fill();
//關閉作圖路徑，避免和之后在畫板上繪制的內(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://www.dbjr.com.cn",10,40">http://www.dbjr.com.cn",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>
相關文章
這篇文章主要介紹了Html5 canvas實現(xiàn)粒子時鐘的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-06- 下面小編就為大家?guī)硪黄肏TML5的canvas實現(xiàn)一個炫酷時鐘效果。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-20
- 這篇文章主要介紹了使用html5 canvas 畫時鐘代碼實例分享的相關資料,需要的朋友可以參考下2015-11-11
- 這篇文章主要介紹了使用canvas繪制超炫時鐘的方法及代碼，非常的漂亮，這里推薦給大家2014-12-17
- 這篇文章主要介紹了canvas版人體時鐘的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2021-01-29
