当前位置：首页 > uni-app

uniapp绘制曲线

2026-03-05 03:00:05uni-app

使用Canvas绘制曲线

在uniapp中可以通过Canvas组件绘制曲线，需要借助Canvas的API实现。以下是绘制贝塞尔曲线的示例代码：

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    const ctx = uni.createCanvasContext('myCanvas')
    ctx.beginPath()
    ctx.moveTo(20, 20)
    ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)
    ctx.setStrokeStyle('blue')
    ctx.setLineWidth(5)
    ctx.stroke()
    ctx.draw()
  }
}
</script>

使用第三方图表库

echarts-for-wx库适配了uniapp环境，可以绘制复杂曲线图表。安装后通过以下方式使用：

<template>
  <view>
    <ec-canvas id="mychart" canvas-id="mychart"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from 'echarts'
import ecCanvas from '@/components/ec-canvas/ec-canvas.vue'

export default {
  components: { ecCanvas },
  onReady() {
    const chart = echarts.init(document.getElementById('mychart'), null, {
      width: 300,
      height: 200
    })
    chart.setOption({
      xAxis: { type: 'category' },
      yAxis: { type: 'value' },
      series: [{
        data: [5, 20, 36, 10, 10, 20],
        type: 'line',
        smooth: true
      }]
    })
  }
}
</script>

使用SVG绘制曲线

在uniapp的nvue环境中可以使用SVG绘制曲线：

<template>
  <view>
    <svg width="300" height="200">
      <path d="M10,80 Q95,10 180,80" stroke="red" fill="none"/>
    </svg>
  </view>
</template>

性能优化建议

高频绘制的场景建议使用离屏Canvas。先创建离屏Canvas绘制内容，再通过drawImage将结果绘制到主Canvas上：

const offScreenCanvas = uni.createOffscreenCanvas()
const offCtx = offScreenCanvas.getContext('2d')
// 在离屏Canvas上绘制
offCtx.beginPath()
offCtx.moveTo(0, 0)
offCtx.lineTo(200, 100)
offCtx.stroke()

// 将结果绘制到主Canvas
const ctx = uni.createCanvasContext('myCanvas')
ctx.drawImage(offScreenCanvas, 0, 0)
ctx.draw()

不同方法适用于不同场景，Canvas适合自定义绘图，图表库适合数据可视化，SVG适合静态矢量图形。根据具体需求选择合适方案。

uniapp绘制曲线