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设置画布为实际显示尺寸的两倍
