uni-app Canvas 画布尺寸设置教程 - 宽度、高度设置方法详解

在 uni-app 中，可以通过``标签来创建一个画布，并通过`style`属性来设置画布的高宽。

例如，要将画布的宽度设置为 300 像素，高度设置为 200 像素，可以使用以下代码：

<template>
  <view>
    <canvas style='width: 300px; height: 200px;'></canvas>
  </view>
</template>

注意，这里的宽度和高度可以使用具体的像素值，也可以使用百分比来表示相对于父元素的宽度和高度。

另外，如果要通过 JavaScript 动态设置画布的高宽，可以使用`uni.createSelectorQuery()`方法来获取`canvas`元素的上下文对象，并调用`canvasContext.setWidth()`和`canvasContext.setHeight()`方法来设置宽度和高度。

例如，以下代码将画布的宽度设置为 300 像素，高度设置为 200 像素：

export default {
  mounted() {
    uni.createSelectorQuery()
      .select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const canvasContext = canvas.getContext('2d')
        canvasContext.setWidth(300)
        canvasContext.setHeight(200)
      })
  }
}

注意，这里的`'#myCanvas'`是`canvas`元素的`id`，你需要在`canvas`元素上添加一个`id`属性来进行选择。