Vue3 + Uniapp 如何在 canvas 中实现绘图功能？

在Vue3和Uniapp项目中，如何在canvas中实现绘图功能？我尝试了使用原生canvas API，但在Uniapp环境下遇到兼容性问题，绘制的内容无法正常显示。请问是否有适合Uniapp的canvas绘图解决方案？或者需要引入第三方库？希望能提供一个具体的代码示例，说明如何在uniapp的vue3组件中正确初始化canvas并实现基础绘图功能（如绘制线条、图形等）。

2 回复

在Vue3 + Uniapp中使用canvas绘图：

  1. 创建canvas组件：
<canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  1. 使用ref获取canvas上下文：
const ctx = uni.createCanvasContext('myCanvas', this)
  1. 绘制图形：
ctx.beginPath()
ctx.arc(150, 150, 50, 0, 2 * Math.PI)
ctx.setFillStyle('red')
ctx.fill()
ctx.draw()

注意：Uniapp中需使用uni.createCanvasContext而非浏览器API。


在 Vue3 + Uniapp 中实现 Canvas 绘图功能，主要通过以下步骤完成：

1. 创建 Canvas 元素

在模板中添加 <canvas> 元素，并设置 canvas-id 和样式：

<template>
  <view>
    <canvas 
      canvas-id="myCanvas" 
      :style="{ width: '300px', height: '300px', border: '1px solid #ccc' }"
    ></canvas>
    <button @click="draw">开始绘制</button>
  </view>
</template>

2. 获取 Canvas 上下文

在 Vue3 的 setup() 中使用 uni.createCanvasContext：

import { ref } from 'vue'

export default {
  setup() {
    const draw = () => {
      // 创建 Canvas 上下文
      const ctx = uni.createCanvasContext('myCanvas')
      
      // 设置绘制样式
      ctx.setFillStyle('#ff0000')
      ctx.fillRect(20, 20, 150, 100)
      
      ctx.setStrokeStyle('#0000ff')
      ctx.setLineWidth(5)
      ctx.strokeRect(50, 50, 120, 80)
      
      // 绘制文本
      ctx.setFontSize(16)
      ctx.setFillStyle('#333')
      ctx.fillText('Hello Canvas', 30, 150)
      
      // 执行绘制
      ctx.draw()
    }

    return { draw }
  }
}

3. 常用绘图方法

  • fillRect(x, y, width, height) - 填充矩形
  • strokeRect(x, y, width, height) - 描边矩形
  • arc(x, y, radius, startAngle, endAngle) - 绘制圆弧
  • moveTo(x, y) + lineTo(x, y) - 绘制路径
  • fillText(text, x, y) - 填充文本

4. 注意事项

  • 确保在 ctx.draw() 前完成所有绘制设置
  • 在 Uniapp 中 Canvas 上下文需要通过 uni.createCanvasContext 获取
  • 支持 H5 和小程序平台，但部分 API 可能存在平台差异

5. 完整示例

const drawCircle = () => {
  const ctx = uni.createCanvasContext('myCanvas')
  ctx.beginPath()
  ctx.arc(150, 150, 50, 0, 2 * Math.PI)
  ctx.setFillStyle('blue')
  ctx.fill()
  ctx.draw()
}

通过以上方法即可在 Vue3 + Uniapp 中实现基本的 Canvas 绘图功能。记得在页面卸载时调用 ctx.draw() 确保绘制完成。

回到顶部