发布时间：2023-05-07 18:14:49 发布者：文昌文城莱奥网络技术工作室 浏览次数：471
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 实现在画布上画直线</title>
</head>
<body>
<canvas id="my-canvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
const canvas = document.getElementById('my-canvas');
const context = canvas.getContext('2d');
let isMouseDown = false;
let startX = 0;
let startY = 0;
let endX = 0;
let endY = 0;
canvas.addEventListener('mousedown', function(event) {
isMouseDown = true;
startX = event.offsetX;
startY = event.offsetY;
});
canvas.addEventListener('mouseup', function(event) {
isMouseDown = false;
endX = event.offsetX;
endY = event.offsetY;
context.beginPath();
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.stroke();
});
</script>
</body>
</html>