<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 = '3D8FAE' // 填充颜色
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 = '#5EA3D1' // 半透明蓝色
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 = '#5EA3D1' // 半透明蓝色
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 = '#5EA3D1' // 半透明蓝色
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 = '#5EA3D1' // 填充颜色
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>
vue3项目使用canvas绘制闸门前后水位,输入水位自动调整
最新推荐文章于 2024-05-06 04:24:45 发布