12、用Canvas繪製背景時鐘
阿新 • • 發佈:2019-02-01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="clock" width="500px" height="500px" style="background: #000"></canvas>
<script>
var canvas=document.getElementById ("clock");
var cxt=canvas.getContext("2d");
function drawClock(){
// 獲取系統時間
var date=new Date();
var hour=date.getHours();
var min=date.getMinutes();
var sec=date.getSeconds();
// alert(hour);
hour>12 ?hour-12:hour;
// 清空畫布
cxt.clearRect(0,0,canvas.width,canvas.height);
//繪製時刻度
cxt.strokeStyle="blue";
cxt.lineWidth=10;
cxt.beginPath(); //起始一條路徑
cxt.arc(250,250,200,0,Math.PI*2);
cxt.stroke();
cxt.closePath();//結束路徑
cxt.clip();//按圓框裁剪時鐘背景圖
// 繪製錶盤背景
var img =new Image();
img.src="clock.jpg";
cxt.drawImage(img,40,40,420,420);
for(var i=0;i<12;i++){
cxt.save();
cxt.strokeStyle="yellow";
cxt.lineWidth=7;
cxt.translate(250,250);//設定原點
cxt.rotate(30*i*Math.PI/180);//設定旋轉角度,隔30度畫一個分刻度
cxt.beginPath();
cxt.moveTo(0,-197);
cxt.lineTo(0,-175);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
//繪製分刻度
for(var i=0;i<60;i++){
cxt.save();
cxt.strokeStyle="yellow";
cxt.lineWidth=5;
cxt.translate(250,250);//設定原點
cxt.rotate(6*i*Math.PI/180);//設定旋轉角度,隔30度畫一個分刻度
cxt.beginPath();
cxt.moveTo(0,-195);
cxt.lineTo(0,-185);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
// 繪製時針
cxt.save();
cxt.strokeStyle="blue";
cxt.lineWidth=7;
cxt.translate(250,250);
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-130);
cxt.lineTo(0,0);
cxt.stroke();
cxt.closePath();
cxt.restore();
//繪製分針
cxt.save();
cxt.strokeStyle="yellow";
cxt.lineWidth=4;
cxt.translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,0);
cxt.stroke();
cxt.closePath();
cxt.restore();
// 繪製秒針
cxt.save();
cxt.strokeStyle="red";
cxt.lineWidth=3;
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,0);
cxt.stroke();
cxt.closePath();
// cxt.restore();
// 美化錶盤,中間小圓
cxt.beginPath();
cxt.arc(0,0,7,0,Math.PI*2);
cxt.fillStyle="yellow";
cxt.fill();
cxt.strokeStyle="red";
cxt.stroke();
cxt.closePath();
// 秒針上的小圓
cxt.beginPath();
cxt.arc(0,-140,7,0,Math.PI*2);
cxt.fillStyle="yellow";
cxt.fill();
cxt.strokeStyle="red";
cxt.stroke();
cxt.closePath();
cxt.restore();
}
drawClock();
setInterval(drawClock,1000);//設定定時器
</script>
</body>
</html>
效果圖: