uniapp画布用法

创建画布组件

在uni-app中，使用<canvas>标签创建画布，需指定canvas-id属性作为唯一标识。示例代码：

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

获取画布上下文

通过uni.createCanvasContext(canvasId)获取绘图上下文，支持2D绘制API：

const ctx = uni.createCanvasContext('myCanvas');
ctx.setFillStyle('#FF0000');
ctx.fillRect(10, 10, 150, 75);
ctx.draw(); // 必须调用draw才会生效

常用绘图方法

• 绘制矩形：fillRect(x, y, width, height)
• 绘制文本：fillText(text, x, y)
• 绘制路径：moveTo(x, y) + lineTo(x, y) + stroke()
• 绘制圆形：arc(x, y, radius, startAngle, endAngle, anticlockwise)

保存与导出

使用canvasToTempFilePath将画布导出为图片：

uni.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath); // 临时图片路径
  }
});

性能优化

• 减少不必要的draw()调用
• 复杂图形建议使用离屏canvas预渲染
• 动画使用requestAnimationFrame控制帧率

注意事项

• H5端canvas与小程序端API存在差异，需条件编译
• App端部分机型需设置canvas的width/height为偶数避免模糊
• 真机调试时部分样式可能需要使用rpx适配