create-canvas-context-async.uvue

<template>
  <view>
    <view>create canvas context async</view>
    <canvas id="canvas" class="canvas-home" style="height: 100px;border: 1px solid blue;"></canvas>
    <view style="margin-top: 30px;"></view>
    <view>isCanvasContextNull: {{isCanvasContextNull}}</view>
    <child-canvas class="node-child-component" />
  </view>
</template>

<script>
  import childCanvas from './child-canvas.uvue';

  type getContext = {
    ctx : boolean,
    hasFillRect : boolean
  }
  export default {
    components: {
      childCanvas
    },
    data() {
      return {
        isCanvasContextNull: false
      }
    },
    methods: {

      drawImage() {
        uni.createCanvasContextAsync({
          id: 'canvas',
          component: null,
          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();
          }
        })
      }
    },
    onReady() {
      this.drawImage()
    }
  }
</script>