uni-app 动态设置 canvas 高宽 - 详细教程及示例代码

<template>
  <view>
    <canvas :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" canvas-id="myCanvas"></canvas>
    <button @click="changeCanvasSize">改变 canvas 大小</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      canvasWidth: 200,
      canvasHeight: 200,
    }
  },
  methods: {
    changeCanvasSize() {
      this.canvasWidth = 300;
      this.canvasHeight = 300;
    },
  },
}
</script>
<p>在上面的代码中，通过 <code>:style</code> 绑定了 canvas 的宽高，然后在 <code>changeCanvasSize</code> 方法中修改 <code>canvasWidth</code> 和 <code>canvasHeight</code> 的值，即可动态改变 canvas 的高宽。</p>