Canvas绘制一个时钟
Canvas:一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。
博客地址:https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e
先上效果图:
先创建一个index.html
,内容如下:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Canvas绘制一个时钟</title>
<style>
html, body {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
<!-- 引入js -->
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
上面代码没啥好讲的,重点是下面这段代码
<canvas id="clock" width="400" height="400"></canvas>
1、首先创建一个CanvasRenderingContext2D对象作为2D渲染的上下文
const $clock = document.getElementById('clock');
// 创建ctx对象
const ctx = $clock.getContext('2d');
// 定义圆心坐标(x, y)和半径r
const x = 200, y = 200, r = 150;
2、绘制表盘
渐变色:
createLinearGradient(x0,y0,x1,y1)
创建线性的渐变对象,并使用addColorStop(stop,color)
方法规定颜色和位置。
绘制圆弧:arc(x, y, r, startAngle, endAngle, anticlockwise)
加粗样式以(x, y)
为圆心,以r
为半径,从startAngle
弧度开始到endAngle
弧度结束。anticlosewise
是布尔值,true表示逆时针,false表示顺时针。(默认是顺时针)
const lingrad = ctx.createLinearGradient(r, 0, -r, 0);
lingrad.addColorStop(0, '#242f37');
lingrad.addColorStop(1, '#48585c');
ctx.fillStyle = lingrad;
ctx.beginPath(); // 开始绘制
ctx.arc(x, y, r, 0, Math.PI * 2, true); // 绘制圆盘
ctx.fill(); // 填充
3、绘制时钟刻度
旋转坐标轴:
rotate(angle)
旋转的角度(angle
),它是顺时针方向的,以弧度为单位的值,旋转的中心为坐标原点。
// 这里需要将坐标点移到画布中心
ctx.translate(x, y);
for (let i = 0; i < 12; i++) {
ctx.beginPath();
ctx.strokeStyle = '#999';
ctx.lineWidth = 3;
ctx.rotate(Math.PI / 6)