canvas时钟
2020-03-26 本文已影响0人
即将牛逼的蛋蛋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="drawing" width="400" height="400"></canvas>
</body>
<script>
// 获取绘图上下文
var drawing = document.getElementById('drawing');
// 填充和描边
var context = drawing.getContext('2d')
/*
* rotate(角度) 围绕远点旋转图像
* scale(scaleX, scaleY) x和y分别以多少倍进行缩放
* translate(x, y) 将坐标原点移动到(x, y)
*/
// 上面画圆的方法并未更改原点 更改原点之后绘制更加方便
context.translate(200, 200);
drawClock();
function drawClock() {
// 获取时分秒
var myDate = new Date(); //实例一个时间对象；
var year = myDate.getFullYear(); //获取系统的年；
var month = myDate.getMonth() + 1; //获取系统月份，由于月份是从0开始计算，所以要加1
var day = myDate.getDate() > 12 ? myDate.getDate() - 12 : myDate.getDate(); // 获取系统日，
var hour = myDate.getHours(); //获取系统时，
var minute = myDate.getMinutes(); //分
var second = myDate.getSeconds(); //秒
// console.log(hour, minute, second)
context.clearRect(-200, -200, 500, 500);
// 开始路径
context.beginPath();
// 外圆
context.arc(0, 0, 100, 0, Math.PI * 2, false);
context.lineWidth = 2;
context.strokeStyle = '#000';
context.stroke();
context.closePath()
// 内圆
context.beginPath();
context.lineWidth = 1;
context.arc(0, 0, 95, 0, Math.PI * 2, false);
context.strokeStyle = '#000';
context.stroke();
context.closePath()
// 分针
context.beginPath();
context.moveTo(0, 0);
// context.lineTo(0, -70);
context.lineTo(Math.cos(Math.PI / 180 * (270 + 6 * minute + second / 10)) * 70, Math.sin(Math.PI / 180 * (270 + 6 * minute + second / 10)) * 70);
// 线的宽度
context.lineWidth = 3;
// 线的颜色
context.strokeStyle = '#ff5000';
context.stroke();
context.closePath()
// 时针
context.beginPath();
context.moveTo(0, 0);
context.lineTo(Math.cos(Math.PI / 180 * (270 + 30 * hour + minute / 2)) * 55, Math.sin(Math.PI / 180 * (270 + 30 * hour + minute / 2)) * 55);
context.lineWidth = 2;
context.strokeStyle = 'red';
context.stroke();
context.closePath()
// 秒针
context.beginPath();
context.moveTo(0, 0);
// 旋转角度计算 每次起始位置都从270° 开始 也就是 -90°
context.lineTo(Math.cos(Math.PI / 180 * (270 + 6 * second)) * 72, Math.sin(Math.PI / 180 * (270 + 6 * second)) * 72);
context.lineWidth = 1;
context.strokeStyle = 'green';
context.stroke();
context.closePath()
// 圆心
context.beginPath();
// 圆的边框宽度
context.arc(0, 0, 5, 0, Math.PI * 2, false);
// 圆填充颜色
context.fillStyle = 'red';
context.fill();
context.closePath()
////// 绘制内部刻度
// 计算每个点的 x 和 y
// x = cos(angle) * 半径
// y = sin(angle) * 半径
// 需要12个刻度 竖线刻度
const mark = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
// 竖线的起始位置计算半径
const beginPath = 85;
// 竖线的结束位置计算半径
const endPath = 95
const angle = Math.PI * 2 / mark.length
mark.forEach((ele, index) => {
context.beginPath();
///////////因为之前设置过fillStyle 所以循环内必须把fillStyle 放在第一个 否则 3 的颜色会与之前设置的一样
// 字颜色
context.fillStyle = 'green';
// 字居中
context.textAlign = 'center';
// 文字基线
context.textBaseline = 'middle';
// 刻度
context.fillText(ele, Math.cos(angle * index) * (beginPath - 8), Math.sin(angle * index) * (beginPath - 8));
// 绘图点移到相应的位置
context.moveTo(Math.cos(angle * index) * beginPath, Math.sin(angle * index) * beginPath);
// 从绘图点开始绘制直线
context.lineTo(Math.cos(angle * index) * endPath, Math.sin(angle * index) * endPath);
// 刻度线颜色
context.strokeStyle = 'blue';
// 刻度线宽度
context.lineWidth = 2;
context.stroke();
context.closePath()
})
/////// 绘制小刻度的小圆点
// 小圆点的圆心位置
const beginPathSmall = 92;
// 一共有60个刻度 除了大刻度竖线竖线之外 还有48个 所以需要判断
const angleSmall = Math.PI * 2 / 60
var i = 50;
for (var i = 1; i <= 60; i++) {
context.beginPath();
// 大刻度每个角度是 30deg 小刻度每个角度间隔6deg 所以判断如果取余30不为0 则可以画原点 如果为0 说明当前是在大刻度上
if ((6 * i) % 30) {
context.arc(Math.cos(angleSmall * i) * beginPathSmall, Math.sin(angleSmall * i) * beginPathSmall, 2, 0, Math.PI * 2, false);
context.fillStyle = 'orange';
}
context.fill();
context.closePath()
}
}
setInterval(drawClock, 1000);
</script>
</html>
