先看效果

直接上代码（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.widthcanvasHeight = canvas.value.height}const drawdampic = () => {const image = new Image()image.src = damSrcimage.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>