canvas&&CSS&&SVG三种实现仪表盘的方式

最新推荐文章于 2024-08-23 09:50:31 发布

Quiet-Night

最新推荐文章于 2024-08-23 09:50:31 发布

阅读量2.7k

点赞数

分类专栏： Web前端 canvas css

本文链接：https://blog.csdn.net/DeepLies/article/details/90648265

版权

本文详细介绍了如何使用Canvas、CSS和SVG三种方式实现仪表盘的绘制。通过分解图形并利用各自特性，展示了从静态到动态效果的实现过程，强调了不同方法的适用场景和优缺点。

摘要由CSDN通过智能技术生成

先上效果图：
在这里插入图片描述

这种图形大家应该都见过，俗称仪表盘，当然，上图只是个最基本的仪表盘架子，可能在实际场景中还会其他很多花里胡哨的点缀，那些暂且不管，不是关键，这东西经常见到，但还没亲自上手在代码层面实现过，最近做的一个需求恰好有这个场景，这里归纳一下

Canvas 实现

大部分情况下，对于这种偏可视化的元素，一般都选择使用 canvas来进行绘制，现在已经 9120年了，线上使用 canvas完全没问题

仪表盘整体是一个复杂图形，而复杂图形是由简单图形组合而成，只要把所有组成这个仪表盘的简单图形绘制出来，再进行组合，整个仪表盘自然也就绘制出来了

所以，首先对仪表盘进行分解，分解成 canvas能绘制出的基本图形，其主体其实就两个圆弧，一个是底部蓝色的半圆轨道，一个是代表进度的红色圆弧，其实都是圆弧，canvas刚好有绘制圆弧的能力，即：

ctx.arc

至于动态绘制，只需要配合 requestAnimationFrame即可

const trackW = 6
const rx = 500
const ry = 500
const radius = 400
const innerLineW = 20
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
function draw (toAngle, currentAngle = Math.PI) {
   
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  // 半圆轨道
  ctx.beginPath()
  ctx.strokeStyle = '#ad80fc'
  ctx.lineWidth = trackW
  ctx.arc(rx, ry, radius, Math.PI, 0, false)
  ctx.stroke()
  // 圆弧
  ctx.beginPath()
  ctx.lineCap = 'round'
  ctx.strokeStyle = '#fe4d55'
  ctx.lineWidth = innerLineW
  ctx.arc(rx, ry, radius, Math.PI, currentAngle, false)
  ctx.stroke()
  if (currentAngle < toAngle) {
   
    currentAngle += 0.02
    if (currentAngle