Draw a clock with canvas
Today, I used canvas to draw a clock. I haven't used this thing for a long time. Let's take a look again today.
Let's take a look at the effect first, but this is a static image, which can actually be moved
Specify the width and length of the canvas
<canvas id='mycanvas' width="600" height="600"></canvas>
You can start drawing now
<script>
//获取元素
var mycanvas = document.getElementById('mycanvas');
//画笔
var content = mycanvas.getContext('2d');
function show() {
// 清空画布
content.clearRect(0, 0, 600, 600);
// 获取系统的当前时间
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth();
var day = today.getDate();
var hour = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
hour = hour + minutes / 60;
if (hour > 12) {
hour = hour - 12;
} else {
hour = hour;
}
// 画一个表盘
// 开始画一个圆
content.beginPath();
// 画一个圆心为（ 300， 300）， 半径为200的圆
content.arc(300, 300, 200, 0, 2 * Math.PI, false);
// 把圆填充颜色粉红色
content.fillStyle = "pink";
content.fill();
// 线的宽度为20，颜色为天蓝
content.lineWidth = 20;
content.strokeStyle = 'skyblue';
content.stroke();
// 闭合线路
content.closePath();
// 画刻度 时针
for (let i = 0; i < 12; i++) {
// 每次画线的之前保存canvas的状态
content.save();
// 时刻度的宽度；
content.lineWidth = 2;
// 时针颜色
content.strokeStyle = '#333';
// 将每次重绘的位置都设置为300，300
content.translate(300, 300);
// 时刻度之间间隔30度 旋转
content.rotate(i * 30 * Math.PI / 180);
content.beginPath();
// 长度为20
content.moveTo(0, -170);
content.lineTo(0, -190);
content.stroke();
// 闭合线路
content.closePath();
//restore方法，相当于将新复制的canvas上的内容
//与原来的canvas的内容进行合并
content.restore();
}
// 画刻度 分针 秒针
for (let i = 0; i < 60; i++) {
content.save();
// 小刻度的宽度；
content.lineWidth = 1;
content.strokeStyle = 'black';
content.translate(300, 300);
//每个之间间隔6度 旋转
content.rotate(i * 6 * Math.PI / 180);
content.beginPath();
// 长度为10
content.moveTo(0, -180);
content.lineTo(0, -190);
content.stroke();
content.closePath();
content.restore();
}
// 画表盘的数字
for (let i = 0; i < 12; i++) {
// 当i为0时坐标为(1,0)*145 即指在3点的位置,所以从三开始
let num = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
content.save();
content.translate(300, 300);
content.fillStyle = 'black';
content.font = '25px 黑体';
content.beginPath();
// 在时刻度中, 每格是30度, 用cos算出对应的横坐标,
//sin算出对应的竖坐标
// 145相当于从中心到数字的距离,可以自己进行调整
let x = Math.cos((2 * Math.PI / 12) * i) * 145;
let y = Math.sin((2 * Math.PI / 12) * i) * 145;
content.fillText(num[i], x, y);
content.stroke();
content.closePath();
content.restore();
}
// 画一个时针
content.save();
content.beginPath();
// 时针的宽度为3
content.lineWidth = 3;
// 时针的颜色
content.strokeStyle = 'cadetblue';
// 将每次重绘的位置都设置为300，300
content.translate(300, 300);
// 每次转30度
content.rotate(hour * 30 * Math.PI / 180);
// 开始画
content.beginPath();
content.moveTo(0, -90);
content.lineTo(0, 10);
content.stroke();
content.closePath();
// 将之前画的内容合并
content.restore();
// 画分针
content.save();
content.beginPath();
// 时针的宽度为3
content.lineWidth = 2;
// 时针的颜色
content.strokeStyle = 'lightsteelblue';
// 将每次重绘的位置都设置为300，300
content.translate(300, 300);
// 每次转30度
content.rotate(minutes * 6 * Math.PI / 180);
// 开始画
content.beginPath();
content.moveTo(0, -120);
content.lineTo(0, 15);
content.stroke();
content.closePath();
// 将之前画的内容合并
content.restore();
// 画秒针
content.save();
content.beginPath();
// 时针的宽度为3
content.lineWidth = 1;
// 时针的颜色
content.strokeStyle = 'coral';
// 将每次重绘的位置都设置为300，300
content.translate(300, 300);
// 每次转30度
content.rotate(seconds * 6 * Math.PI / 180);
// 开始画秒针
content.beginPath();
content.moveTo(0, -160);
content.lineTo(0, 17);
content.stroke();
content.closePath();
// 画秒针上面的小圆点,进行装饰一下
content.beginPath();
content.lineWidth = 2;
content.strokeStyle = 'lightcoral'
content.arc(0, -140, 4, 0, 2 * Math.PI, false);
content.stroke()
content.closePath();
// 将之前画的内容合并
content.restore();
}
// 设置一个定时器,每秒都运行一次,这样就可以动起来了，
//因此我们要在前面每次画的时候清空画布
setInterval(show, 1000);
</script>
In this way, the clock is drawn. In this process, it is necessary to understand when writing the numbers on the scale, and use the corresponding angle to obtain the coordinates.