child-canvas.uvue

<template>
  <view>
    <canvas class="child-canvas" id="canvas" style="height: 100px;border: 1px solid red;"></canvas>
    <view>isCanvasContextNull: {{isCanvasContextNull}}</view>
  </view>
</template>

<script>
  type getContext = {
    ctx : boolean,
    hasFillRect : boolean
  }

  export default {
    data() {
      return {
        isCanvasContextNull : false
      }
    },
  
    mounted() {
      this.$nextTick(() => {
        uni.createCanvasContextAsync({
          id: 'canvas',
          component: this,
          success: (res : CanvasContext) => {
            const context = res.getContext('2d')!;
            this.isCanvasContextNull = true
            // 若干绘制调用
            // 绘制红色正方形
            context.fillStyle = "rgb(200, 0, 0)";
            context.fillRect(10, 10, 50, 50);

            // 绘制蓝色半透明正方形
            context.fillStyle = "rgba(0, 0, 200, 0.5)";
            context.fillRect(30, 30, 50, 50);
            context.draw();
          }

        })
      })
    }
  }
</script>