vue中利用canvas纯图形绘制大坝闸前水位，闸后水位，并根据水位动态显示

且听风思雨

于 2024-05-28 09:42:58 发布

阅读量267

点赞数 1

文章标签： javascript 前端 vue.js canva可画

本文链接：https://blog.csdn.net/qq_46531791/article/details/139255613

版权

<template>
  <canvas ref="canvas" height="150px" width="400px"></canvas>
</template>
<script setup>
import { onMounted, ref } from 'vue'

const canvas = ref()
let ctx = ref()
const skyLevel = 140
const groundLevel = 140 // 地面高度
const damTop = 115 // 大坝顶部高度


const drawRectangle = () => {
  ctx.value.fillStyle = 'brown' // 地面颜色
  ctx.value.fillRect(0, groundLevel, 400, 10) // 绘制地面
}

const drawRectangle1 = () => {
  ctx.value.fillStyle = 'black' // 填充颜色
  ctx.value.fillRect(150, 10, 10,105) // 绘制矩形
}

const drawWaterLevelBeforeDam = (level) => { 
  const waterHeight = skyLevel - level
  const waterWidth = (skyLevel - damTop) / Math.tan(Math.PI / 6)
  ctx.value.font = '500 20px Arial'
  ctx.value.fillStyle = 'black' // 设置文本颜色为黑色
  ctx.value.fillText('闸前', 40, 20)
  ctx.value.fillText(level+'(m)', 40,waterHeight-10)
  ctx.value.fillStyle = 'rgba(0, 0, 255, 0.5)' // 半透明蓝色
  ctx.value.beginPath()
  ctx.value.moveTo(0, groundLevel)
  ctx.value.lineTo(150, groundLevel)
  ctx.value.lineTo(150, waterHeight)
  ctx.value.lineTo(0, waterHeight)
  ctx.value.closePath()
  ctx.value.fill()
}
const drawWaterLevelAfterDam = (level) => {
  
  const maxvalue = groundLevel - damTop
  const watermax2 = skyLevel - maxvalue
  const waterHeight = skyLevel - level  
  ctx.value.font = '500 20px Arial'
  ctx.value.fillStyle = 'black' // 设置文本颜色为黑色
  ctx.value.fillText('闸后', 230, 20)
  ctx.value.fillText(level+'(m)', 230,waterHeight-10)
  const waterWidth = (skyLevel - damTop) / Math.tan(Math.PI / 6)
  if (level <= maxvalue) {
    ctx.value.fillStyle = 'rgba(0, 0, 255, 0.5)' // 半透明蓝色
    const waterHeight = skyLevel - level
    const waterWidth = (skyLevel - damTop) / Math.tan(Math.PI / 6)
    const leftTopY = 190 - (level * 70) / maxvalue
    ctx.value.beginPath()
    ctx.value.moveTo(190, groundLevel) // 左下角
    ctx.value.lineTo(400, groundLevel) // 右下角
    ctx.value.lineTo(400, waterHeight) // 右上角
    ctx.value.lineTo(leftTopY, waterHeight) // 左上角
    ctx.value.closePath()
    ctx.value.fill()
  } else {
    ctx.value.fillStyle = 'rgba(0, 0, 255, 0.5)' // 半透明蓝色
    ctx.value.beginPath()
    ctx.value.moveTo(190, groundLevel) // 左下角
    ctx.value.lineTo(400, groundLevel) // 右下角
    ctx.value.lineTo(400, watermax2) // 右上角
    ctx.value.lineTo(170, watermax2) // 左上角
    ctx.value.closePath()
    ctx.value.fill()

    ctx.value.fillStyle = 'rgba(0, 0, 255, 0.5)' // 填充颜色
    ctx.value.beginPath()
    ctx.value.moveTo(160, watermax2) // 左下角
    ctx.value.lineTo(400, watermax2) // 右下角
    ctx.value.lineTo(400, waterHeight) // 右上角
    ctx.value.lineTo(160, waterHeight) // 左上角
    ctx.value.closePath()
    ctx.value.fill()
  }
}
const drawInvertedTrapezoid = () => {
  const damHeight = skyLevel - damTop +90
  ctx.value.fillStyle = 'brown' // 填充颜色
  ctx.value.beginPath()
  ctx.value.moveTo(150, groundLevel) // 左下角
  ctx.value.lineTo(190, groundLevel) // 右下角
  ctx.value.lineTo(170, damHeight) // 右上角
  ctx.value.lineTo(150, damHeight) // 左上角
  ctx.value.closePath()
  ctx.value.fill()
}

const initContext = () => {
  ctx.value = canvas.value.getContext('2d')
}

onMounted(() => {
  initContext()
  drawRectangle()
  drawInvertedTrapezoid()
  drawRectangle1()
  drawWaterLevelBeforeDam(60) // 大坝前水位高度为 40
  drawWaterLevelAfterDam(50)
})
</script>

<style scoped>
canvas {

}
</style>