canvas打造时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas width="600" height="500" style="border: 1px solid #ccc;display: block;margin: 50px auto;"></canvas>
<script>
let Color = function () {
this.ctx = document.querySelector('canvas').getContext("2d");
this.src = "img/Ring.jpg";
this.image = new Image();
};
Color.prototype = {
init: function () {
let that = this;
that.hour = new Date().getHours();
that.minutes = new Date().getMinutes();
that.seconds = new Date().getSeconds();
that.ctx.clearRect(0, 0, 600, 500);
that.drawDial();
that.drawScale();
that.drawPointer();
that.drawText();
},
drawDial: function () {
this.ctx.beginPath();
this.ctx.arc(300, 250, 200, 0, Math.PI * 2);
this.ctx.lineWidth = 5;
this.ctx.strokeStyle = '#F819C2';
this.ctx.stroke();
this.ctx.fill();
this.ctx.clip();
this.setBg();
},
setBg: function () {
this.image.src = this.src;
this.ctx.drawImage(this.image, 87, 0, 416, 416, 0, 0, 500, 500);
},
drawScale: function () {
//小时刻度
for (let i = 0; i < 12; i++) {
this.ctx.save(); //保存当前状态
this.ctx.translate(300, 250);
this.ctx.beginPath();
this.ctx.rotate(30 * i * Math.PI / 180);
this.ctx.moveTo(0, -190);
this.ctx.lineTo(0, -170);
this.ctx.lineWidth = 5;
this.ctx.strokeStyle = 'cyan';
this.ctx.stroke();
this.ctx.restore(); //恢复当前状态
}
//分钟刻度
for (let i = 0; i < 60; i++) {
this.ctx.save(); //保存当前状态
this.ctx.translate(300, 250);
this.ctx.beginPath();
this.ctx.rotate(6 * i * Math.PI / 180);
this.ctx.moveTo(0, -190);
this.ctx.lineTo(0, -180);
this.ctx.lineWidth = 3;
if (i % 5 !== 0) {
this.ctx.strokeStyle = 'white';
this.ctx.stroke();
}
this.ctx.restore(); //恢复当前状态
}
},
getTime: function () {
let h = this.hour < 10 ? "0" + this.hour : this.hour;
let m = this.minutes < 10 ? "0" + this.minutes : this.minutes;
let s = this.seconds < 10 ? "0" + this.seconds : this.seconds;
return h + ":" + m + ":" + s;
},
drawPointer: function () {
//圆盘
this.ctx.save();
this.ctx.translate(300, 250);
this.ctx.beginPath();
this.ctx.arc(0, 0, 8, 0, Math.PI * 2);
this.ctx.fillStyle = '#F819C2';
this.ctx.fill();
this.ctx.restore();
//时针
this.ctx.save();
this.ctx.translate(300, 250);
this.ctx.beginPath();
this.ctx.rotate(30 * (this.hour + this.minutes / 60) * Math.PI / 180);
this.ctx.moveTo(0, 18);
this.ctx.lineTo(0, -100);
this.ctx.lineTo(2, -90);
this.ctx.lineTo(0, -92);
this.ctx.lineTo(-2, -90);
this.ctx.lineTo(0, -100);
this.ctx.lineWidth = 4;
this.ctx.stroke();
this.ctx.restore();
//分
this.ctx.save();
this.ctx.translate(300, 250);
this.ctx.beginPath();
this.ctx.rotate(6 * this.minutes * Math.PI / 180);
this.ctx.moveTo(0, 18);
this.ctx.lineTo(0, -130);
this.ctx.lineTo(2, -120);
this.ctx.lineTo(0, -122);
this.ctx.lineTo(-2, -120);
this.ctx.lineTo(0, -130);
this.ctx.lineWidth = 2;
this.ctx.stroke();
this.ctx.restore();
//秒
this.ctx.save();
this.ctx.translate(300, 250);
this.ctx.beginPath();
this.ctx.rotate(6 * this.seconds * Math.PI / 180);
this.ctx.moveTo(0, 18);
this.ctx.lineTo(0, -160);
this.ctx.lineTo(2, -150);
this.ctx.lineTo(0, -152);
this.ctx.lineTo(-2, -150);
this.ctx.lineTo(0, -160);
this.ctx.lineWidth = 1;
this.ctx.stroke();
this.ctx.restore();
},
drawText: function () {
let time = this.getTime();
let copy = "Made in China";
this.ctx.save();
this.ctx.beginPath();
this.ctx.translate(300, 250);
this.ctx.font = "20px serif";
this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle';
this.ctx.fillStyle = "cyan";
this.ctx.fillText(time, 0, 110);
this.ctx.fillText(copy, 0, 135);
this.ctx.restore();
}
};
let color = new Color();
window.onload = function () {
color.init();
};
setInterval(function () {
color.init();
}, 1000);
</script>
</body>
</html>效果图：
