canvas绘制3色圆弧，分段多色圆弧实现

在圆弧绘制中，除了单色圆弧、渐变色圆弧，我们也常会遇到分段多色圆弧，用不同颜色区分不同区间的状态，让视觉上更直观。

此需求常在刻度盘、圆弧、环形进度条等视图中应用。接下来，分享下多色圆弧的实现步骤。

一、canvas老四件，标签 - 上下文 - 屏幕适配 - 清空画布

<template>
  <canvas ref="circle"></canvas>
</template>

<script>
export default {
  name:'ColorfullCircle',
  mounted(){
    this.draw()
  },
  methods:{
    draw(){
      // 获取canvas元素和上下文
      let canvas = this.$refs.circle
      let ctx = canvas.getContext("2d")

       // 获取设备像素比，解决移动端显示锯齿、模糊等问题
      const dpr = window.devicePixelRatio || 1  
      canvas.style.width = '240px'
      canvas.style.height = '240px'
      canvas.width = 240*dpr
      canvas.height = 240*dpr
      ctx.scale(dpr,dpr)

      // 清空画布
      ctx.clearRect(0, 0, 240, 240)
    }
  }
};
</script>

二、分段多色圆弧实现

实现讲解：

从此图中，我们可以看到，一个圆形的总弧度 = 2 * Math.PI。

要将整个圆分成3段，分别填充不同颜色。那么，每段的弧度 = 2 * Math.PI / 3。

现在，只需要确认一个起始弧度，就可以开始绘制每段弧。

第一个弧的绘制起点为 ： 起始弧度， 终点为： 起始弧度 + 每段的弧度

第二个弧的绘制起点为 ： 第一个弧的终点， 终点为：起始弧度 + 每段的弧度*2

第三个弧的绘制起点为 ： 第二个弧的终点， 终点为：起始弧度 + 每段的弧度*3

以此类推……

圆形的绘制代码如下：

const perRadian = 2 * Math.PI / 3
const startAngle = 1.5 * Math.PI

ctx.beginPath()
ctx.arc(120, 120, 100, startAngle, startAngle + perRadian, false)
ctx.strokeStyle = '#05FC55'
ctx.lineWidth = 10
ctx.stroke()

ctx.beginPath()
ctx.arc(120, 120, 100, startAngle + perRadian, startAngle + perRadian*2, false)
ctx.strokeStyle = '#F3EB0C'
ctx.lineWidth = 10
ctx.stroke()

ctx.beginPath()
ctx.arc(120, 120, 100, startAngle + perRadian*2, startAngle + perRadian*3, false)
ctx.strokeStyle = '#F30C0C'
ctx.lineWidth = 10
ctx.stroke()

效果如下：

三、扩展

在圆形分段的基础上，如果我们要绘制的是环形的，只需要修改perRadian、startAngle的值即可。

perRadian(每段的弧度) = 总弧度 / 分段数

startAngle(起始弧度) 为第一个弧的地点弧度

如 环形可设置为：

const perRadian = 2 * Math.PI / 3
const startAngle = 1.5 * Math.PI

效果如下：

在这个基础上，需要绘制环形进度条、仪表盘等视图，可以参考以往文章进行绘制。

1、canvas 绘制可滑动环形进度条，带滑块canvas 绘制可滑动环形进度条，带滑块-CSDN博客

2、canvas绘制仪表盘/刻度盘

canvas绘制仪表盘/刻度盘-CSDN博客

如有疑问，欢迎留言交流；

如有定制需求，欢迎私信沟通~