uniapp画布用法

uniapp画布基础用法

在uniapp中使用canvas画布需要了解基础API和组件属性。canvas组件通过<canvas>标签声明，支持2D和WebGL渲染。

创建基础画布结构：

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

获取画布上下文并绘制内容：

const ctx = uni.createCanvasContext('myCanvas')
ctx.setFillStyle('#FF0000')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()

绘制图形方法

设置填充颜色和描边颜色：

ctx.setFillStyle('blue')
ctx.setStrokeStyle('red')

绘制矩形和圆形：

// 填充矩形
ctx.fillRect(20, 20, 100, 50)

// 描边圆形
ctx.beginPath()
ctx.arc(75, 75, 50, 0, 2 * Math.PI)
ctx.stroke()

路径与文本绘制

创建复杂路径：

ctx.beginPath()
ctx.moveTo(50, 50)
ctx.lineTo(100, 100)
ctx.lineTo(50, 150)
ctx.closePath()
ctx.stroke()

绘制文本内容：

ctx.setFontSize(16)
ctx.fillText('Hello World', 30, 30)
ctx.strokeText('UniApp', 30, 60)

图片绘制与保存

绘制图片到画布：

uni.chooseImage({
  success: function(res) {
    ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
    ctx.draw()
  }
})

保存画布为图片：

uni.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: function(res) {
    uni.saveImageToPhotosAlbum({
      filePath: res.tempFilePath
    })
  }
})

动画实现技巧

使用requestAnimationFrame实现动画：

function drawAnimation() {
  ctx.clearRect(0, 0, 300, 200)
  // 绘制动画帧内容
  ctx.draw()
  requestAnimationFrame(drawAnimation)
}

性能优化建议

减少不必要的重绘：

• 使用ctx.save()和ctx.restore()管理状态
• 批量绘制操作后调用一次ctx.draw()
• 复杂静态内容可预先渲染为图片

跨平台注意事项：

• 小程序端canvas层级较高，需注意遮挡问题
• H5端支持标准HTML5 Canvas API
• APP端性能最佳，支持硬件加速

常见问题解决

画布内容不显示：

• 检查canvas-id是否正确
• 确保调用了ctx.draw()
• 验证画布尺寸是否设置正确

图片跨域问题：

• 使用网络图片需配置域名白名单
• 建议先将图片下载到本地再绘制

清晰度问题：

• 使用pixelRatio适配高清屏
• 通过CSS设置画布为实际显示尺寸的两倍