vue3 uniapp canvas使用方法详解

在Vue3和uniapp中使用canvas时遇到了几个问题：1）如何在uniapp中正确引入和初始化canvas组件？2）Vue3的响应式特性对canvas绘制有哪些影响需要注意？3）能否分享一个在uniapp中实现常见绘图功能的完整示例代码？4）在不同平台（H5/小程序）下canvas的API兼容性如何处理？求详细的使用教程和注意事项。

2 回复

Vue3 + Uniapp 使用 Canvas 步骤：

  1. template 中加 <canvas canvas-id="myCanvas" />
  2. 用 ref 获取节点：const canvas = ref(null)
  3. 在 onReady 或 mounted 中通过 uni.createCanvasContext 创建绘图上下文
  4. 调用绘图 API：drawRect、fillText 等
  5. 最后调用 ctx.draw() 完成绘制

注意：H5 和微信小程序 API 略有差异，需做平台判断。


在 Vue3 + UniApp 中使用 Canvas 主要通过 <canvas> 组件实现，适用于绘制图形、图表或自定义动画。以下是核心使用方法：

1. 基础绘制步骤

模板部分

<template>
  <view>
    <canvas 
      id="myCanvas" 
      canvas-id="myCanvas" 
      :style="{ width: '300px', height: '200px' }"
    ></canvas>
  </view>
</template>

脚本部分

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 获取 Canvas 上下文
      const ctx = uni.createCanvasContext('myCanvas')
      
      // 绘制矩形
      ctx.setFillStyle('#4CD964')
      ctx.fillRect(20, 20, 150, 100)
      
      // 绘制文字
      ctx.setFontSize(16)
      ctx.setFillStyle('#000000')
      ctx.fillText('Hello Canvas', 50, 80)
      
      // 执行绘制
      ctx.draw()
    })

    return {}
  }
}

2. 常用 API 说明

  • uni.createCanvasContext(canvasId)：创建绘图上下文
  • ctx.draw(reserve, callback)：将绘制内容输出到画布
    • reserve：是否保留之前内容（默认 false）
    • callback：绘制完成回调
  • 图形绘制：
    • fillRect() / strokeRect()：填充/描边矩形
    • arc()：绘制圆弧
    • moveTo() / lineTo()：路径绘制
  • 样式设置：
    • setFillStyle() / setStrokeStyle()：设置颜色
    • setLineWidth()：设置线宽
    • setFontSize()：设置字体大小

3. 注意事项

  1. 尺寸问题：Canvas 宽高需在模板中直接设置，CSS 设置可能失效
  2. 绘制时机：必须在 onMounted 或之后的生命周期执行
  3. 平台差异：H5 端可使用标准 Canvas API，小程序端需使用 UniApp 封装 API
  4. 性能优化：复杂绘制建议使用离屏 Canvas

4. 绘制圆形示例

const ctx = uni.createCanvasContext('myCanvas')
ctx.beginPath()
ctx.arc(100, 100, 50, 0, 2 * Math.PI)
ctx.setFillStyle('#FF5A5F')
ctx.fill()
ctx.draw()

5. 图像绘制

// 绘制网络图片
ctx.drawImage('https://example.com/image.jpg', 0, 0, 100, 100)
ctx.draw()

// 绘制本地图片（需先下载）
uni.downloadFile({
  url: 'https://example.com/image.jpg',
  success: res => {
    ctx.drawImage(res.tempFilePath, 0, 0, 100, 100)
    ctx.draw()
  }
})

6. 清空画布

ctx.clearRect(0, 0, 300, 200)
ctx.draw(true) // 保留之前内容请传 true

常见问题

  • 绘制不显示：检查是否调用了 ctx.draw()
  • 图片模糊：确保 Canvas 物理像素与逻辑像素一致
  • 滚动穿透：在 Canvas 上添加 @touchmove.stop 阻止滚动

以上方法在微信小程序、H5 等平台均可使用，但部分 API 在不同平台可能存在细微差异，建议测试多端兼容性。

回到顶部