水库大坝浸润线 canvas绘制 静态

<template>
  <div id="canvas-continer">
    <canvas ref="canvas" id="canvas"></canvas>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import damSrc from '@/assets/imgs/homepage/dam.png'
import { watchImmediate } from '@vueuse/core'
const canvas = ref()
let ctx = ref()
let canvasWidth = ''
let canvasHeight = ''
const initContext = () => {
  ctx.value = canvas.value.getContext('2d')
}

function resize_canvas() {
  let continer = document.getElementById('canvas-continer')
  canvas.value.width = continer.offsetWidth
  canvas.value.height = continer.offsetHeight
  canvasWidth = canvas.value.width
  canvasHeight = canvas.value.height
}

const drawdampic = () => {
  const image = new Image()
  image.src = damSrc
  image.onload = () => {
    ctx.value.drawImage(image, 0, 50, 400, 100)
    drawlserve()
  }
}
const drawwater = () => {
  ctx.value.fillStyle = '#73BCD7'
  ctx.value.fillRect(0, 65, 130, 80)
  ctx.value.fillStyle = '#73BCD7'
  ctx.value.fillRect(200, 80, 160, 60)
}
const drawlserve = () => {
  ctx.value.fillStyle = 'white'
  ctx.value.fillRect(110, 65, 10, 80)
  ctx.value.fillRect(180, 50, 10, 95)
  ctx.value.fillRect(260, 80, 10, 65)
  ctx.value.fillRect(300, 110, 10, 35)
  ctx.value.fillStyle = '#77C8E6'
  ctx.value.fillRect(110, 65, 10, 50)
  ctx.value.fillRect(180, 85, 10, 45)
  ctx.value.fillRect(260, 100, 10, 40)
  ctx.value.fillRect(300, 120, 10, 15)
  drawLine()
}
const drawLine = () => {
  ctx.value.beginPath()
  ctx.value.moveTo(115, 65)
  ctx.value.lineTo(185, 85)
  ctx.value.lineTo(265, 100)
  ctx.value.lineTo(305, 120)
  ctx.value.setLineDash([5, 5]);
  ctx.value.strokeStyle = '#77C8E6'
  ctx.value.lineWidth = 2;
  ctx.value.stroke()
}
onMounted(() => {
  initContext()
  resize_canvas()
  drawwater()
  drawdampic()
})
</script>

<style>
</style>

下图为用到的大坝底图

效果展示如下：