使用canvas绘制一个动态的表盘

最新推荐文章于 2024-05-09 09:54:41 发布
最新推荐文章于 2024-05-09 09:54:41 发布
阅读量983 收藏
点赞数
分类专栏： 面试 canvas 文章标签： javascript html5 canvas 表盘 时钟
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/mmyhs/article/details/122219670
版权

使用canvas绘制一个动态的表盘

技术要求

需要一点点数学基础
需要对 canvas 的常见的方法熟悉

一点点数学基础

角度转弧度的计算公式

canvas 常见的方法

菜鸟教程

扬帆起航

  1. 首先创建一个canvas ，并将这个dom添加在html中

方法名称：createCanvas

// 创建一个 canvas circle
const canvas = document.createElement('canvas');

// 防止一些浏览器不支持，给与提示
canvas.innerText = '您的浏览器版本过低，请升级你的浏览器!';

// 使用原生的方式设置 canvas 的 高度和宽度，css设置canvas并不是很可靠
canvas.width = 800;
canvas.height = 800;
canvas.style.border = '1px #ccc solid';

return canvas;
  1. 绘制表盘

方法名称：drawDial

const { width, height } = canvas;
// 获得 2d 上下文对象
const ctx = canvas.getContext('2d');
const { PI } = Math;
const r = (width / 2) - 30;
// 还原设置
ctx.restore();
// 清空画布
ctx.clearRect(0, 0, width, height);

ctx.save();
// 定位到中心点
ctx.translate(width / 2, height / 2);

ctx.beginPath();
ctx.lineWidth = 4;

// 以0，0为原点，r为半径，0为起始角，2*Math.PI为结束角，顺时针画圆
ctx.arc(0, 0, r, 0, 2 * PI, false);
ctx.stroke();

// 绘制刻度
ctx.beginPath();
ctx.lineWidth = 2;
for (let i = 0; i < 60; i += 1) {
  ctx.moveTo(0, 0);
  ctx.arc(0, 0, r, (6 * i * Math.PI) / 180, 6 * (i + 1) * (Math.PI / 180), false);
}
ctx.closePath();
ctx.stroke();
// 画实心圆
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0, 0, r - 30, 0, (360 * Math.PI) / 180, false);
ctx.fill();

// 画时针刻度线
ctx.beginPath();
ctx.lineWidth = 10;
for (let i = 0; i < 12; i += 1) {
  ctx.moveTo(0, 0);
  ctx.arc(0, 0, r, (30 * i * Math.PI) / 180, 30 * (i + 1) * (Math.PI / 180), false);
}
ctx.closePath();
ctx.stroke();
// 画实心圆
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0, 0, r - 60 / 2, 0, (360 * Math.PI) / 180, false);
ctx.fill();

// 绘制小时刻盘
// 弧度=角度*Math.PI/180;
const deg = (2 * Math.PI) / 12;
ctx.beginPath();
ctx.fillStyle = 'black';// 字体颜色
ctx.font = '60px noraml Calibri';// 字体
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (let i = 1; i < 13; i += 1) {
  const x1 = Math.sin(i * deg);// 正弦
  const y1 = -Math.cos(i * deg);// 余弦
  ctx.fillText(i, x1 * (r - 80), y1 * (r - 80));// 填充 80这个值越大 越显示在圆外面
}
ctx.closePath();
ctx.restore();
  1. 绘制表盘上的日期

方法名称：drawDate

const { width, height } = canvas;
const ctx = canvas.getContext('2d');
const year = date.getFullYear();
const month = date.getMonth() < 9 ? `0${date.getMonth()}` : date.getMonth() + 1;
const day = date.getDate();
const hours = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
const minutes = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
const seconds = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
const dateStr = `${year}/${month}/${day}`;
const time = `${hours}:${minutes}:${seconds}`;

ctx.save();
ctx.font = '40px LED';
ctx.textAlign = 'center';
ctx.fillStyle = '#ccc';
// ctx.strokeStyle = '#ccc';
// ctx.strokeText(time, width / 2, (height / 2) + 200, width);
ctx.fillText(dateStr, width / 2, (height / 2) + 170, width);
ctx.fillText(time, width / 2, (height / 2) + 225, width);
ctx.restore();
  1. 绘制表盘中心的小圆点

方法名称：drawDot

const { width, height } = canvas;
const ctx = canvas.getContext('2d');
ctx.save();
ctx.beginPath();
ctx.fillStyle = '#F3A829';
ctx.arc(width / 2, height / 2, 10, 0, 360, false);
ctx.fill();
ctx.closePath();
ctx.restore();
  1. 绘制时分秒针

方法名称：drawAllHands

// 渲染当前的时间
const date = new Date();
//弧度=角度*Math.PI/180;
// 因为现在的0度=3点，第一步需要重置这个0度到12点
// 每小时的弧度是30度
const hoursRadian = ((date.getHours() * 30 - 90) * Math.PI) / 180;
// 每分钟的弧度是6度
const minutesRadian = ((date.getMinutes() * 6 - 90) * Math.PI) / 180;
// 每秒钟的弧度是6度
const secondsRadian = ((date.getSeconds() * 6 - 90) * Math.PI) / 180;

drawDate(date, canvas); // 绘制日期时间
drawHand(hoursRadian, 150, 10, 'black', canvas); // 绘制时针
drawHand(minutesRadian, 230, 6, 'black', canvas); // 绘制分针
drawHand(secondsRadian, 280, 3, '#F3A829', canvas); // 绘制秒针
drawDot(canvas); // 绘制小圆点
  1. 整合并调用方法，渲染表盘
const app = document.getElementById('app');
const canvas = createCanvas();

// 将 canvas appendChild 到 #app
app.appendChild(canvas);

requestAnimationFrame(function step() {
  drawDial(canvas); // 绘制表盘
  drawAllHands(canvas); // 绘制时分秒针
  requestAnimationFrame(step);
});

完整js代码

/* 绘制时针、或分针、或秒针
  * 参数1：要绘制的针的角度
  * 参数2：要绘制的针的长度
  * 参数3：要绘制的针的宽度
  * 参数4：要绘制的针的颜色
  * 参数4：ctx
  */
function drawHand(angle, len, lineWidth, color, canvas) {
  const { width, height } = canvas;
  // 获得 2d 上下文对象
  const ctx = canvas.getContext('2d');
  ctx.save();
  // 定位到中心点
  ctx.translate(width / 2, height / 2);

  ctx.shadowColor = '#000';
  ctx.shadowOffsetY = 30;
  ctx.shadowOffsetX = 30;
  ctx.shadowBlur = 30;

  ctx.beginPath();
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = color;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';

  // ctx.moveTo(0, 0);
  // ctx.arc(0, 0, len, angle, angle, false);

  ctx.rotate(angle);
  ctx.moveTo(0, 0);
  ctx.lineTo(-20, 0);
  ctx.lineTo(len + 20, 0);

  ctx.fill();
  ctx.stroke();
  ctx.closePath();
  ctx.restore();
}

/* 绘制表盘 */
function drawDial(canvas) {
  const { width, height } = canvas;
  // 获得 2d 上下文对象
  const ctx = canvas.getContext('2d');
  const { PI } = Math;
  const r = (width / 2) - 30;
  // 还原设置
  ctx.restore();
  // 清空画布
  ctx.clearRect(0, 0, width, height);

  ctx.save();
  // 定位到中心点
  ctx.translate(width / 2, height / 2);

  ctx.beginPath();
  ctx.lineWidth = 4;

  // 以0，0为原点，r为半径，0为起始角，2*Math.PI为结束角，顺时针画圆
  ctx.arc(0, 0, r, 0, 2 * PI, false);
  ctx.stroke();

  // 绘制刻度
  ctx.beginPath();
  ctx.lineWidth = 2;
  for (let i = 0; i < 60; i += 1) {
    ctx.moveTo(0, 0);
    ctx.arc(0, 0, r, (6 * i * Math.PI) / 180, 6 * (i + 1) * (Math.PI / 180), false);
  }
  ctx.closePath();
  ctx.stroke();
  // 画实心圆
  ctx.beginPath();
  ctx.fillStyle = '#fff';
  ctx.arc(0, 0, r - 30, 0, (360 * Math.PI) / 180, false);
  ctx.fill();

  // 画时针刻度线
  ctx.beginPath();
  ctx.lineWidth = 10;
  for (let i = 0; i < 12; i += 1) {
    ctx.moveTo(0, 0);
    ctx.arc(0, 0, r, (30 * i * Math.PI) / 180, 30 * (i + 1) * (Math.PI / 180), false);
  }
  ctx.closePath();
  ctx.stroke();
  // 画实心圆
  ctx.beginPath();
  ctx.fillStyle = '#fff';
  ctx.arc(0, 0, r - 60 / 2, 0, (360 * Math.PI) / 180, false);
  ctx.fill();

  // 绘制小时刻盘
  // 弧度=角度*Math.PI/180;
  const deg = (2 * Math.PI) / 12;
  ctx.beginPath();
  ctx.fillStyle = 'black';// 字体颜色
  ctx.font = '60px noraml Calibri';// 字体
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  for (let i = 1; i < 13; i += 1) {
    const x1 = Math.sin(i * deg);// 正弦
    const y1 = -Math.cos(i * deg);// 余弦
    ctx.fillText(i, x1 * (r - 80), y1 * (r - 80));// 填充 80这个值越大 越显示在圆外面
  }
  ctx.closePath();
  ctx.restore();
}

/**
 * 表盘上的日期
 */
function drawDate(date, canvas) {
  const { width, height } = canvas;
  const ctx = canvas.getContext('2d');
  const year = date.getFullYear();
  const month = date.getMonth() < 9 ? `0${date.getMonth()}` : date.getMonth() + 1;
  const day = date.getDate();
  const hours = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
  const minutes = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
  const seconds = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
  const dateStr = `${year}/${month}/${day}`;
  const time = `${hours}:${minutes}:${seconds}`;

  ctx.save();
  ctx.font = '40px LED';
  ctx.textAlign = 'center';
  ctx.fillStyle = '#ccc';
  // ctx.strokeStyle = '#ccc';
  // ctx.strokeText(time, width / 2, (height / 2) + 200, width);
  ctx.fillText(dateStr, width / 2, (height / 2) + 170, width);
  ctx.fillText(time, width / 2, (height / 2) + 225, width);
  ctx.restore();
}

/** 绘制小圆点 */
function drawDot(canvas) {
  const { width, height } = canvas;
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.beginPath();
  ctx.fillStyle = '#F3A829';
  ctx.arc(width / 2, height / 2, 10, 0, 360, false);
  ctx.fill();
  ctx.closePath();
  ctx.restore();
}

/* 绘制时分秒针 */
function drawAllHands(canvas) {
  // 渲染当前的时间
  const date = new Date();
  // 弧度=角度*Math.PI/180;
  // 因为现在的0度=3点，第一步需要重置这个0度到12点
  // 每小时的弧度是30度
  const hoursRadian = ((date.getHours() * 30 - 90) * Math.PI) / 180;
  // 每分钟的弧度是6度
  const minutesRadian = ((date.getMinutes() * 6 - 90) * Math.PI) / 180;
  // 每秒钟的弧度是6度
  const secondsRadian = ((date.getSeconds() * 6 - 90) * Math.PI) / 180;

  drawDate(date, canvas); // 绘制日期时间
  drawHand(hoursRadian, 150, 10, 'black', canvas); // 绘制时针
  drawHand(minutesRadian, 230, 6, 'black', canvas); // 绘制分针
  drawHand(secondsRadian, 280, 3, '#F3A829', canvas); // 绘制秒针
  drawDot(canvas); // 绘制小圆点
}

/**
 * 创建canvas
 */
function createCanvas() {
  // 创建一个 canvas circle
  const canvas = document.createElement('canvas');

  // 防止一些浏览器不支持，给与提示
  canvas.innerText = '您的浏览器版本过低，请升级你的浏览器!';

  // 使用原生的方式设置 canvas 的 高度和宽度，css设置canvas并不是很可靠
  canvas.width = 800;
  canvas.height = 800;
  canvas.style.border = '1px #ccc solid';

  return canvas;
}

function draw(canvas) {
  requestAnimationFrame(function step() {
    drawDial(canvas); // 绘制表盘
    drawAllHands(canvas); // 绘制时分秒针
    requestAnimationFrame(step);
  });
}

const app = document.getElementById('app');
const canvas = createCanvas();
// 将 canvas appendChild 到 #app
app.appendChild(canvas);
draw(canvas);

备注

这里引用了特殊字体，canvas 引用特殊字体很简单，本案例中使用的字体下载地址

<style>
   @font-face {
     font-family: 'LED';
     /* 这里是字体文件的路径 */
     src: url('./font//bb3812/bb3812.TTF');
   }
 </style>

最终成品

在这里插入图片描述

明明有话说
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas绘制入门
Ping果狸的博客
01-18 446
Canvas绘制入门 HTML5元素用于图形的绘制，通过脚本（通常是JavaScript）来完成 标签只是图形容器，要使用脚本来绘制图形 canvas绘制步骤： 1、使用HTML来创建 HTML JavaScript var canvas = document.getElementById ('canvas'); //获取canvas绘图上下文环境 contextvar
使用canvas实现画板功能
qq_44947708的博客
09-21 1486
1、canvas是什么？ 画布、用于绘制图像 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>你画我猜</title> <link rel="stylesheet" type="text/css" href="css/s...
canvas绘制仪表盘
11-24
用原生canvas绘制仪表盘，代码简单，参数可传递。本代码既可以用于学习canvas，也可以用于项目中。
快速掌握canvas
暖雪若峰的博客
03-01 1534
canvas
高度可配置的HTML5 Canvas仪表盘 - HTML Canvas Gauges v2.1
最新发布
gitblog_00026的博客
05-09 380
高度可配置的HTML5 Canvas仪表盘 - HTML Canvas Gauges v2.1 项目地址:https://gitcode.com/Mikhus/canvas-gauges 项目介绍 HTML Canvas Gauges是一个轻量级的JavaScript库，它利用HTML5的Canvas API来创建高度可定制的仪表盘组件。这个项目以其最小化代码基础为亮点，特别适合于物联网(IoT)...
JavaScript 笔记（十一）：Canvas
0lonely0
10-01 1798
JavaScript 笔记（十一）：Canvas
js实现刻度时钟
lishunyu1226的博客
01-18 724
js
使用canvas绘制一个动态的表盘案例使用的字体
12-29
本案例将深入探讨如何利用Canvas API创建一个动态的表盘，同时关注其中涉及到的字体处理，特别是矩阵字体的使用。 一、Canvas基础 Canvas是一个二维绘图上下文，它提供了丰富的API接口，如fillRect()用于填充矩形...
canvas绘制表盘时钟
08-31
总的来说，使用Canvas API绘制表盘时钟是一个很好的实践项目，它展示了如何利用JavaScript和Canvas API实现动态、交互式的网页图形。这个过程涉及到数学（如角度计算）、时间和日期处理，以及图形绘制技巧，对提升...
JS+canvas绘制的动态机械表动画效果
10-19
- `drawDial()`：绘制表盘，通过设置线宽和颜色，然后使用`arc()`绘制一个圆来实现。 - `drawDegreeScale()`：绘制刻度，通过计算每个角度的弧度，然后根据大刻度和小刻度的长度，使用`lineWidth`和`arc()`来绘制...
使用canvas绘制超炫时钟
09-28
以上就是使用canvas绘制超炫时钟的基本流程。这个过程不仅涉及到HTML5 canvas的绘图技术，还涉及到基本的几何和三角函数知识，如正弦、余弦以及角度与弧度的转换。通过这种方式，我们可以创建出极具视觉吸引力的交互...
canvas绘制图像 保存_如何使用Node.js和Canvas创建和保存图像
cuk0051的博客
08-27 2337
canvas绘制图像 保存I share my blog posts on Twitter, and there’s been a time when I entertained myself drawing drawing an image for each blog post. 我在Twitter上分享我的博客文章，有时候我会为每个博客文章绘制图像来娱乐自己。 I set up Hugo...
创建canvas
日志
07-20 597
html> html> head lang="en"> meta charset="UTF-8"> title>HTML5创建canvastitle> style type="text/css"> *{ margin: 0px; padding: 0px; } .canvas{
Canvas下画仪表盘，结合设计好的表盘背景
记录下日常遇到的问题或者一些思考，不喜勿喷
06-30 874
canvas 仪表盘
js 创建 canvas
哲的博客
11-30 1万+
var canvas = document.createElement('canvas'); 1.给页面的div添加canvas var canvasList = document.getElementById('lineArea'); var canvas = document.createElement('canvas'); can
Canvas——认识CreateJs库
小狼驿站
05-11 1195
1、CreateJs A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 简单认识实例： lang="en"> charset="UT
wx.createCanvasContext 画布
weixin_45446474的博客
08-17 1069
wx.createCanvasContext 画布
Tkinter 组件详解（十二）：Canvas
热门推荐
来自江南的你的博客
12-27 4万+
Canvas（画布）组件为 Tkinter 的图形绘制提供了基础。Canvas 是一个高度灵活的组件，你可以用它绘制图形和图表，创建图形编辑器，并实现各种自定义的小部件。 何时使用 Canvas 组件？ Canvas 是一个通用的组件，通常用于显示和编辑图形。你可以用它来绘制线段、圆形、多边形，甚至是绘制其它组件。 用法 在 Canvas 组件上绘制对象，可以用 create_xxx() ...
创建并初始化canvas的方法
qq_38932407的博客
04-03 3657
H5入门啦啦啦啦 点击w3c的canvas教程 1.通过标签<canvas> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> <script type="text/javascri...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值