canvas.uvue

<template>
  <view>
    <page-head :title="title"></page-head>
    <view class="page-body">
      <!-- 如何使用浏览器内置 canvas -->
      <view ref="drawing" class="drawing"></view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Canvas',
        drawing: null as any | null,
        canvasElement: null as any | null,
        canvasContext: null as any | null,
      }
    },
    onReady() {
      this.drawing = this.$refs['drawing'] as any;
      // @ts-ignore
      this.canvasElement = document.createElement('canvas')
      // @ts-ignore
      this.canvasElement.className = 'canvas'
      this.drawing!.appendChild(this.canvasElement)

      this.canvasContext = this.canvasElement!.getContext('2d')
      this.canvasContext!.fillRect(100, 50, 100, 50)
    }
  }
</script>

<style>
  .drawing >>> .canvas {
    width: 300px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
    border: 1px dashed #000;
  }
</style>