1.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
canvas{
position: absolute;
left:10;
top:10;
}
</style>
</head>
<body>
<canvas id="dialCanvas"></canvas>
<canvas id="handCanvas"></canvas>
</body>
<script>
var dialCanvas=document.getElementById('dialCanvas');
var handCanvas=document.getElementById('handCanvas');
//定義寬度，高度和半徑
var w=800;
var h=600;
var r=200;
//定義畫(huà)布的大小
dialCanvas.width=w;
dialCanvas.height=h;
handCanvas.width=w;
handCanvas.height=h;
//獲取畫(huà)布的環(huán)境
var dialCxt=dialCanvas.getContext("2d");
var handCxt=handCanvas.getContext("2d");
//畫(huà)表盤(pán)
/*
1.畫(huà)表盤(pán)其實(shí)就是畫(huà)圓。
2.為了數(shù)據(jù)的靈動(dòng)性速蕊，數(shù)據(jù)成變量
*/
dialCxt.beginPath();
dialCxt.arc(w/2,h/2,r,0,Math.PI*2);
dialCxt.lineWidth=10;
dialCxt.strokeStyle="#000";
dialCxt.stroke();
//畫(huà)刻度
//封裝畫(huà)刻度函數(shù)
/*
* 確定刻度上的兩個(gè)點(diǎn) x1,y1;x2,y2.確定內(nèi)部點(diǎn)的時(shí)候驾诈，需要定義一個(gè)內(nèi)圓
*刻度是通過(guò)畫(huà)線來(lái)實(shí)現(xiàn)的帮孔。
*
*/
function dialScale(cxt,x,y,innerRadius,outerRadius,number=12,lineWidth=10,strokeStyle="#000"){
var angle=0;
var angleDiff= 360 / number;
for(var i=0;i<number;i++){
var x1=Math.cos(angle/180*Math.PI)*outerRadius+w/2;
var y1=Math.sin(angle/180*Math.PI)*outerRadius+h/2;
var x2=Math.cos(angle/180*Math.PI)*innerRadius+w/2;
var y2=Math.sin(angle/180*Math.PI)*innerRadius+h/2;
cxt.beginPath();
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.lineWidth=lineWidth;
cxt.strokeStyle=strokeStyle;
cxt.stroke();
angle=angle+angleDiff;
}
}
//調(diào)用
//畫(huà)小時(shí)刻度
dialScale(dialCxt,w/2,h/2,r,r-20,12,10);
//畫(huà)分鐘和秒的刻度
dialScale(dialCxt,w/2,h/2,r,r-10,60,2);
//畫(huà)指針
//封住畫(huà)指針函數(shù)
//需要特別注意利用環(huán)境保存祭务，不然畫(huà)不了中狂。
function drawHand(cxt,x,y,angle,length,lineWidth,strokeStyle){
cxt.save();
cxt.beginPath();
cxt.translate(x,y);
cxt.rotate((angle-90)/180*Math.PI)
cxt.moveTo(-20,0);
cxt.lineTo(length,0);
cxt.lineWidth=lineWidth;
cxt.strokeStyle=strokeStyle;
cxt.stroke();
cxt.restore();
}
//畫(huà)秒針
//drawHand(dialCxt,w/2,h/2,6,180,1,"red");
//畫(huà)分針
//drawHand(dialCxt,w/2,h/2,6,150,5,"#000");
//畫(huà)時(shí)針
//drawHand(dialCxt,w/2,h/2,30,140,5,"#000");
//時(shí)針轉(zhuǎn)動(dòng)
function run(){
var date=new Date();
//清空畫(huà)布
handCxt.clearRect(0,0,w,h);
var seconds=date.getSeconds();
drawHand(handCxt,w/2,h/2,6*seconds,180,1,"red");
var minutes=date.getMinutes()+seconds / 60;
drawHand(handCxt,w/2,h/2,6*minutes,150,5,"#000");
var hours=date.getHours() % 12+minutes / 60;
drawHand(handCxt,w/2,h/2,30*hours,100,5,"#ccc");
//console.log(hours);
setTimeout(run,1000);
}
run();
</script>
</html>
