Canvas绘制一个时钟

最新推荐文章于 2024-04-20 19:07:05 发布

秃头小桂子

最新推荐文章于 2024-04-20 19:07:05 发布

阅读量2.2k

点赞数 7

文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_43561201/article/details/124714777

版权

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)

最低0.47元/天解锁文章

秃头小桂子

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
Canvas绘制一个时钟

Canvas绘制一个时钟Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e先上效果图：先创建一个index.html，内容如下：<!DOCTYPE html><h
复制链接

扫一扫