Canvas图表在Vue中无法正确重绘，数据更新后画面还是旧的怎么办？

司Des.鑫提问于 2026-02-25 12:52:21 阅读 60

交互

我在用Vue做动态图表，每次数据变了就调用drawChart()重绘Canvas，但画布上还是显示老数据，好像没刷新一样。是不是要手动清空画布？

试过在drawChart开头加clearRect，但有时候还是残留旧内容，特别是在快速切换数据的时候。

<template>
  <canvas ref="chartCanvas" width="400" height="300"></canvas>
</template>

<script>
export default {
  methods: {
    drawChart() {
      const ctx = this.$refs.chartCanvas.getContext('2d');
      // 这里画折线图
      ctx.beginPath();
      ctx.moveTo(0, 100);
      ctx.lineTo(200, 50);
      ctx.stroke();
    }
  },
  watch: {
    chartData: {
      handler() { this.drawChart(); },
      deep: true
    }
  }
}
</script>

Canvas绘图图表可视化

我来解答赞 6 收藏

反馈

2 条解答

国玲（打工版） Lv1

确实要清空画布，但不是简单调用clearRect就行。我改了一下你的代码：

export default {

  methods: {

    drawChart() {

      const canvas = this.$refs.chartCanvas

      const ctx = canvas.getContext('2d')

      

      // 先保存状态

      ctx.save()

      

      // 清空整个canvas区域

      ctx.clearRect(0, 0, canvas.width, canvas.height)

      

      // 重绘时设置透明度避免残留

      ctx.globalAlpha = 1.0

      

      // 这里画折线图

      ctx.beginPath()

      ctx.moveTo(0, 100)

      ctx.lineTo(200, 50)

      ctx.stroke()

      

      // 恢复状态

      ctx.restore()

    }

  },

  watch: {

    chartData: {

      handler() { 

        // 加个微任务确保数据完全更新

        this.$nextTick(() => this.drawChart()) 

      },

      deep: true

    }

  }

}

再加个style确保canvas尺寸是像素级的：
canvas { width: 100%; height: 100%; }

这样应该能解决残留问题了，主要是清除+重绘顺序要注意。记得检查数据变化是不是真的触发了watcher。有时候开发工具里的缓存也会捣乱，刷新下页面试试。

2026-03-30 08:16

宇文小秋 Lv1

canvas 不会自动清空，每次 drawChart 前必须先 clearRect，而且要等 DOM 更新后再画。
改用 nextTick + clearRect 就搞定：

watch: {

  chartData: {

    handler() {

      this.$nextTick(() => {

        const ctx = this.$refs.chartCanvas.getContext('2d');

        ctx.clearRect(0, 0, this.$refs.chartCanvas.width, this.$refs.chartCanvas.height);

        this.drawChart(ctx);

      });

    },

    deep: true

  }

},

methods: {

  drawChart(ctx) {

    if (!ctx) ctx = this.$refs.chartCanvas.getContext('2d');

    ctx.beginPath();

    ctx.moveTo(0, 100);

    ctx.lineTo(200, 50);

    ctx.stroke();

  }

}

2026-02-25 13:00