Canvas 实现钟表

var obj = document.getElementById(‘clock’);

var ctx = obj.getContext(‘2d’);

var width = ctx.canvas.width;

var height = ctx.canvas.height;

var r = width / 2;

var rem = width / 200; //比例

//画圆

function drawBackground() {

ctx.save();

ctx.translate(r, r);

ctx.beginPath();

ctx.lineWidth = 10 * rem;

//以0，0为原点，r为半径，0为起始角，2*Math.PI为结束角，顺时针画圆

ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false);

ctx.stroke();

var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

ctx.font = 18 * rem + ‘px Arial’;

ctx.textAlign = ‘center’;

ctx.textBaseline = ‘middle’;

//画出1-12的数字

hourNumber.forEach(function (number, i) {

var rad = 2 * Math.PI / 12 * i;

var x = Math.cos(rad) * (r - 30 * rem);

var y = Math.sin(rad) * (r - 30 * rem);

ctx.fillText(number, x, 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 y);

});

//画出秒针走动的60个点

for (var i = 0; i < 60; i++) {

var rad = 2 * Math.PI / 60 * i;

var x = Math.cos(rad) * (r - 18 * rem);

var y = Math.sin(rad) * (r - 18 * rem);

ctx.beginPath();

if (i % 5 === 0) {

ctx.fillStyle = ‘#000’;

ctx.arc(x, y, 2 * rem, 0, 2, 2 * Math.PI, false);

} else {

ctx.fillStyle = ‘#ccc’;

ctx.arc(x, y, 2 * rem, 0, 2, 2 * Math.PI, false);

}

ctx.fill();

}

}

//绘制时针

function drawHour(hour, minute) {

ctx.save();

ctx.beginPath();

var rad = 2 * Math.PI / 12 * hour;

var mrad = 2 * Math.PI / 12 / 60 * minute;

ctx.rotate(rad + mrad);

ctx.lineWidth = 6;

ctx.lineCap = ‘round’;

ctx.moveTo(0, 10 * rem);

ctx.lineTo(0, -r / 2);

ctx.stroke();

ctx.restore();

}

//绘制分针

function drawMinute(minute) {

ctx.save();

ctx.beginPath();

var rad = 2 * Math.PI / 60 * minute;

ctx.rotate(rad);

ctx.lineWidth = 3 * rem;

ctx.lineCap = ‘round’;

ctx.moveTo(0, 10);

ctx.lineTo(0, -r + 30 * rem);

ctx.stroke();

ctx.restore();

}

//绘制秒针

function drawSecond(second) {

ctx.save();

ctx.beginPath();