HTML5 Canvas元素通过鼠标绘制图形
最近工作上遇到这样的需求：生产的产品，在表面的不同区域会发生品质问题，但个产品会拍照进行标记。想要制作一个程序，通过在标准图形上鼠标绘制品质问题点，再累计叠加多个图片，分析问题发生的特征。
过程：
一、创建了一个Canvas元素，设置了固定宽度和高度，并将产品标准图片作为Canvas元素背景
二、结合HTML和JS代码，实现鼠标在Canvas区域随意绘制红色线条的团。
下图是相关代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Mouse Drawing</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="drawingCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let startX;
let startY;
let points = [];
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
startX = e.offsetX;
startY = e.offsetY;
points.push({ x: startX, y: startY });
});
canvas.addEventListener('mousemove', (e) => {
if (isDrawing) {
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineWidth =3;
ctx.moveTo(startX, startY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
startX = e.offsetX;
startY = e.offsetY;
points.push({ x: startX, y: startY });
}
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
</script>
</body>
</html>后续，还将优化，实现在Canvas标准图像上标记的图案，自动镜像到等尺寸的透明图片上。
