uni-app Canvas进阶：打造动态渐变环形图与实时数据流可视化

1. 从零开始：理解uni-app中的Canvas绘图基础

如果你之前只用过uni-app的view、text这些常规组件，第一次接触Canvas可能会觉得有点懵。这很正常，我刚开始的时候也觉得Canvas的API像天书，画个圆都费劲。但别担心，Canvas本质上就是一块画布，你拿着画笔（JavaScript API）在上面画画。在uni-app里，我们用Canvas来做那些普通组件搞不定的、需要自定义绘制的东西，比如我们今天要做的环形图。

uni-app对Canvas的支持很友好，它封装了各端（小程序、H5、App）的底层Canvas API，提供了一套统一的uni.createCanvasContext方法。这意味着你写一套代码，就能在多个平台上跑，这是uni-app做跨端开发最大的优势之一。你不需要去研究微信小程序的wx.createCanvasContext和H5的canvas.getContext('2d')有什么区别，uni-app都帮你处理好了。

那么，怎么在页面上放一块画布呢？很简单，就像写一个普通的view一样。不过这里有个关键点：必须通过canvas-id属性给画布起个名字，后面我们就是靠这个名字找到它并进行绘制的。我习惯把画布包在一个相对定位的容器里，这样方便后续叠加其他元素，比如文字标签。

<view class="chart-container">
  <canvas canvas-id="myRingChart" class="chart-canvas"></canvas>
  <view class="chart-label">{
  
  { progress }}%</view>
</view>

对应的样式也要注意，Canvas组件默认是看不见的，你需要给它设置明确的宽高。我建议用px单位，因为Canvas绘图时的坐标计算是基于像素的，用rpx可能会遇到缩放问题，导致绘制不精确。

.chart-container {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-canvas {
  width: 300px;
  height: 300px;
  position: absolute;
}

.chart-label {
  position: absolute;
  font-size: 36px;
  font-weight: bold;
  color: #333;
}

画布准备好了，接下来就是拿起“画笔”。在页面的onReady生命周期里（确保DOM已经渲染），我们调用uni.createCanvasContext来获取绘图上下文。这个上下文对象（通常叫ctx）就是你所有的绘图工具包，画圆、画线、设置颜色都得靠它。

export default {
  onReady() {
    this.drawRingChart();
  },
  methods: {
    drawRingChart() {
      // 获取绘图上下文，'myRingChart'就是上面canvas-id的值
      const ctx = uni.createCanvasContext('myRingChart', this);
      // 现在，ctx就是你的画笔，可以开始画画了
    }
  }
}

到这里，基础准备工作就完成了。你可能觉得还没画出来东西呢，别急，绘图就像盖房子，地基打好了，后面砌墙盖瓦就快了。理解Canvas是“画布”，ctx是“画笔”这个核心关系，是迈出第一步的关键。接下来，我们就用这支画笔，画出第一个圆环。

2. 绘制你的第一个环形图：从静态到动态渐变

让我们先画一个最简单的环形图——一个灰色的底环和一个蓝色的进度环。这个过程就像先画一个完整的灰色甜甜圈，再在上面根据数据比例，画一段蓝色的甜甜圈。

首先画底环。我们用ctx.arc方法来画圆弧。这个方法参数看起来多，其实很好记：(圆心x, 圆心y, 半径, 起始弧度, 结束弧度, 逆时针?)。画一个完整的圆，起始弧度是0，结束弧度是2 * Math.PI（一个完整的圆周率）。设置线条宽度setLineWidth和颜色setStrokeStyle后，调用ctx.stroke()进行描