小程序之canvas - 移动/放大/缩小/清空/画路径

项目：taro3+vue3

初始化canvas

<canvas
  type="2d"
  id="myCanvas"
  :style="`width: ${width}px; height: ${height}px`"
  canvas-id="myCanvas"></canvas>

可移动的canvas

结合movable-area和movable-view

<movable-area
  id="movableArea"
  class="movable-area"
  scale-area>
  <movable-view
    :style="`width: ${canvasW}px; height: ${canvasH}px;`"
    class="movable-view"
    :x="movableViewX"
    :y="movableViewY"
    :damping="50"
    :out-of-bounds="true"
    direction="all"
    :scale="true"
    :scale-value="scaleValue"
    :scale-min="SCALE_MIN"
    :scale-max="SCALE_MAX">
    <base-canvas
      :is-end="isEnd"
      :img="mapImageInfo.mapUrl"
      :width="canvasW"
      :height="canvasH"
      :list="pathList"></base-canvas>
  </movable-view>
</movable-area>

放大缩小的canvas

movable-view本身是支持放大缩小的，所以canvas上的画的路径需要计算出倍数或者用movable-view的倍数

canvas画路径

清空canvas

this.ctx.clearRect(0, 0, width, height)