水库大坝浸润线绘制

先看效果

直接上代码（vue环境）

<template>
  <div id="canvas-continer" class="h100 w100 mt4">
    <canvas  ref="canvas" id="canvas" class="canvas"></canvas>
  </div>
</template>
 
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import damSrc from './dam2.png'
const canvas = ref()
let ctx = ref()
let canvasWidth = ''
let canvasHeight = ''
const initContext = () => {
  ctx.value = canvas.value.getContext('2d')
}
 
function resize_canvas() {
  let continer:any = 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, 40, canvasWidth, canvasHeight)
    drawlserve()
  }
}
const drawwater = () => {
  ctx.value.fillStyle = '#73BCD7'
  ctx.value.fillRect(0, 245,800, 400)
  ctx.value.fillStyle = '#73BCD7'
  // ctx.value.fillRect(200, 80, 160, 60)
}
const drawlserve = () => {
  ctx.value.fillStyle = 'white'
  ctx.value.fillRect(800, 40, 10, 500)
  ctx.value.fillRect(980, 240, 10, 300)
  ctx.value.fillStyle = '#77C8E6'
  ctx.value.fillRect(800, 365, 10, 300)
  ctx.value.fillRect(980, 435, 10, 345)
  drawY()
  drawLine()
}
const drawY = () => {
  // 绘制坐标轴
  ctx.value.beginPath();
  // X 轴
  ctx.value.moveTo(0, 40);
  ctx.value.lineTo(0, 500);
  ctx.value.strokeStyle = 'white';
  ctx.value.fillStyle = 'white'; // 设置文本填充颜色
  ctx.value.lineWidth = 3;
  for (let i = 0; i < 21; i++) {

    ctx.value.moveTo(0, 40 + i * 23);
    ctx.value.lineTo(10, 40 + i * 23);
    ctx.value.fillText(98-(i), 20, 40 + i * 23)
    ctx.value.moveTo(0, 40 + i * 23);
    ctx.value.lineTo(-10, 40 + i * 23);
  }
  // Y坝底
  ctx.value.moveTo(0, 500);
  ctx.value.lineTo(1450, 500);
  ctx.value.stroke()
  deawLabel()
}
const deawLabel = () => {
  ctx.value.fillStyle = 'white'
  ctx.value.font = '13px Arial';
  ctx.value.fillText('坝顶高程：98m', 600, 15)
  ctx.value.beginPath()
  ctx.value.lineWidth = 1;
  ctx.value.strokeStyle = 'white';
  ctx.value.moveTo(640, 22);
  ctx.value.lineTo(640, 40);
  ctx.value.stroke()

  ctx.value.fillStyle = 'red'
  ctx.value.fillText('校核洪水位：95.44m',120, 80)
  ctx.value.beginPath()
  ctx.value.strokeStyle = 'red';
  ctx.value.lineWidth = 0.6;
  ctx.value.moveTo(0, 100);
  ctx.value.lineTo(80, 100);
  ctx.value.lineTo(120, 80);
  ctx.value.stroke()
  ctx.value.fillStyle = 'yellow'
  ctx.value.fillText('设计洪水位：94.72m', 122, 130)
  ctx.value.beginPath()
  ctx.value.strokeStyle = 'yellow';
  ctx.value.lineWidth = 0.4;
  ctx.value.moveTo(0, 130);
  ctx.value.lineTo(120, 130);
  ctx.value.stroke()
  ctx.value.fillStyle = 'rgb(4 154 184)'
  ctx.value.fillText('正常蓄水位：92.78m', 122, 200)
  ctx.value.beginPath()
  ctx.value.strokeStyle = 'rgb(4 154 184)';
  ctx.value.lineWidth = 0.4;
  ctx.value.moveTo(0, 180);
  ctx.value.lineTo(80, 180);
  ctx.value.lineTo(120, 200);
  ctx.value.stroke()
  ctx.value.fillStyle = 'white'
  //坝前水位变量控制
  ctx.value.fillText('坝前水位：89.44m', 120, 260)
   
  ctx.value.fillText('死水位：85.m', 70, 340)
  ctx.value.beginPath()
  ctx.value.strokeStyle = 'white';
  ctx.value.lineWidth = 0.4;
  ctx.value.moveTo(0, 340);
  ctx.value.lineTo(70,340);
  ctx.value.stroke()
  ctx.value.save()
//断面
ctx.value.fillText('断面：B0+27', 550, 200)
 //孔口高程
 ctx.value.beginPath()
 ctx.value.strokeStyle = 'red';
  ctx.value.lineWidth = 1;
  ctx.value.moveTo(810, 40);
  ctx.value.lineTo(830,20);
  ctx.value.lineTo(950, 20);
  ctx.value.stroke()
 ctx.value.fillText('P1 (渗压系数:0664)', 830, 15)
 ctx.value.strokeStyle = 'red';
  ctx.value.lineWidth = 1;
  ctx.value.moveTo(990, 240);
  ctx.value.lineTo(1020,220);
  ctx.value.lineTo(1120, 220);
  ctx.value.stroke()
 ctx.value.fillText('管口高程：90m', 1020, 215)
 //孔底高程
 ctx.value.fillText('孔底高程：78m', 820, 540)
 ctx.value.fillText('孔底高程：78m', 1000, 540)
//浸润高程
ctx.value.beginPath()
  ctx.value.strokeStyle = 'white';
  ctx.value.lineWidth = 1;
  ctx.value.moveTo(800, 365);
  ctx.value.lineTo(750,300);
  ctx.value.lineTo(700,300);
  ctx.value.stroke()
ctx.value.fillText('85 m', 698,296)
ctx.value.lineWidth = 1;
  ctx.value.moveTo(980, 435);
  ctx.value.lineTo(940,350);
  ctx.value.lineTo(900,350);
  ctx.value.stroke()
ctx.value.fillText('82 m', 897,345)

//坝底高程
ctx.value.fillText('坝底高程：78.56m', 40, 540)
}
const drawLine = () => {

  //变量控制
  ctx.value.beginPath()
  ctx.value.moveTo(315, 245)
  ctx.value.lineTo(800, 365)
  ctx.value.lineTo(800, 365)
  ctx.value.lineTo(980, 435)
  ctx.value.lineTo(1230, 501)
  ctx.value.setLineDash([5, 5]);
  ctx.value.strokeStyle = '#77C8E6'
  ctx.value.lineWidth = 2;
  ctx.value.stroke()
  drawPoint()
}
const drawPoint = () => { // 三角形的顶点
        const A = { x: 315, y: 245 };
        const B = { x: 100, y: 498 };
        const C = { x: 1225, y: 500 };

        // 绘制三角形
        function drawTriangle() {
            // ctx.value.beginPath();
            // ctx.value.moveTo(A.x, A.y);
            // ctx.value.lineTo(B.x, B.y);
            // ctx.value.lineTo(C.x, C.y);
            // ctx.value.closePath();
            // ctx.value.stroke();
        }

        // 在三角形内生成一个随机点
        function getRandomPointInTriangle(A:any, B:any, C:any) {
            let r1 = Math.random();
            let r2 = Math.random();

            // 确保点在三角形内部
            if (r1 + r2 > 1) {
                r1 = 1 - r1;
                r2 = 1 - r2;
            }

            const x = A.x + r1 * (B.x - A.x) + r2 * (C.x - A.x);
            const y = A.y + r1 * (B.y - A.y) + r2 * (C.y - A.y);

            return { x, y };
        }

        // 在三角形内生成多个随机点并绘制
        function drawRandomPointsInTriangle(count:number) {
            for (let i = 0; i < count; i++) {
                const point = getRandomPointInTriangle(A, B, C);
                ctx.value.beginPath();
                ctx.value.fillStyle = '#73BCD7';
                ctx.value.arc(point.x, point.y, 2, 0, Math.PI * 2);
                ctx.value.fill();
            }
        }

        // 主流程
        drawTriangle();
        drawRandomPointsInTriangle(5000); // 生成 100 个随机点
}
onMounted(() => {
  initContext()
  resize_canvas()
  drawwater()
  drawdampic()
})
</script>
 
<style scoped lang="scss">
.container-canvas {
  width: 1000px;
  height: 500px;
}
</style>