canvas例項鬧鐘
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let x = canvas.width / 2, //
y = canvas.height / 2;
function draw() {
ctx.translate(x, y); //將畫布原點移到中心 預設畫布原點在左上角
ctx.save();
//畫大圓盤
ctx.beginPath();
ctx.arc(0, 0, 200, 0, Math.PI * 2);
ctx.strokeStyle = 'blue';
ctx.lineWidth = '10';
ctx.stroke();
ctx.restore();
//畫小時數
ctx.save();
let hourNum = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
ctx.font = '18px Arial';
ctx.strokeStyle = '#333';
ctx.textAlign = 'center';//水平對齊方式
ctx.textBaseline = 'middle';//垂直方向上水平居中
hourNum.forEach((item, index) => {
let rad = Math.PI * 2 / 12 * index;
let x = Math.cos(rad) * 160;
let y = Math.sin(rad) * 160;
ctx.fillText(item, x, y);
})
//畫小數點
for (let i = 0; i < 60; i++) {
let rad = Math.PI * 2 / 60 * i;
let x = Math.cos(rad) * 180,
y = Math.sin(rad) * 180;
if (i % 5 == 0) {
//小時對應的點
ctx.beginPath();
ctx.arc(x, y, 6, 0, Math.PI * 2);
ctx.fillStyle = 'green'
ctx.fill();
}
else {
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
}
}
ctx.restore();
}
function drawDot() {
ctx.save();
ctx.beginPath(0,0);
ctx.arc(0, 0, 10, 0, Math.PI * 2);
// ctx.fillStyle = 'red';
ctx.fill();
ctx.restore();
}
function drawHour(h,m) {
ctx.save();
ctx.beginPath(0, 0);
let rad=Math.PI*2/12*(h+m/60);
ctx.rotate(rad);//旋轉的角度必須寫在畫線之前
ctx.moveTo(0, 20);
ctx.lineTo(0, -100);
ctx.strokeStyle = 'green';
ctx.lineWidth = '3'
ctx.stroke();
ctx.restore();
}
function drawMinute(m) {
ctx.save();
ctx.beginPath(0, 0);
let rad=Math.PI*2/60*m;
ctx.rotate(rad);
ctx.moveTo(0, 20);
ctx.lineTo(0, -120);
ctx.strokeStyle = 'blue';
ctx.lineWidth = '2'
ctx.stroke();
ctx.restore();
}
function drawSecond(s) {
ctx.save();
ctx.beginPath();
let rad=Math.PI*2/60*s;
ctx.rotate(rad);
ctx.moveTo(0, 20);
ctx.lineTo(0, -140);
ctx.strokeStyle = 'red';
ctx.lineWidth = '1'
ctx.stroke();
ctx.restore();
}
let timer = setInterval(() => {
ctx.save();
ctx.clearRect(0, 0, canvas.width, canvas.height);
let date = new Date();
let h = date.getHours(),
m = date.getMinutes(),
s = date.getSeconds();
draw();
drawDot();
drawHour(h,m);
drawMinute(m);
drawSecond(s);
ctx.restore();
}, 1000)