uni-app中使用canvas画
时间: 2023-10-21 09:15:51 浏览: 103
在 uni-app 中使用 canvas 画图,可以使用原生的 canvas API,也可以使用 uni-app 提供的封装组件 uni-canvas。
使用原生的 canvas API,需要在页面中添加一个 canvas 标签,并在 JS 中获取 canvas 对象,然后就可以使用 canvas API 进行绘图了。比如在页面中添加一个 id 为 canvas 的 canvas 标签:
```
<canvas id="canvas"></canvas>
```
然后在 JS 中获取 canvas 对象,进行绘图:
```
const ctx = uni.createCanvasContext('canvas')
ctx.beginPath()
ctx.arc(50, 50, 25, 0, 2 * Math.PI)
ctx.stroke()
```
使用 uni-canvas 组件,则更加方便,只需要在页面中添加 uni-canvas 组件,然后在 JS 中设置绘图函数即可。比如在页面中添加一个 uni-canvas 组件:
```
<uni-canvas :canvas-id="'my-canvas'" :size="500" :onReady="onCanvasReady" />
```
然后在 JS 中设置绘图函数:
```
onCanvasReady(canvas) {
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.arc(250, 250, 125, 0, 2 * Math.PI)
ctx.stroke()
}
```
以上是使用 canvas 进行绘图的简单示例,具体的绘图操作可以参考 canvas API 文档。