jQuery 是一个快速、小巧且功能丰富的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。鼠标画矩形是指通过鼠标事件(如 mousedown
、mousemove
和 mouseup
)来动态绘制一个矩形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Mouse Draw Rectangle</title>
<style>
canvas {
border: 1px solid black;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
$(document).ready(function() {
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let isDrawing = false;
let startX, startY, endX, endY;
canvas.addEventListener('mousedown', function(event) {
isDrawing = true;
startX = event.offsetX;
startY = event.offsetY;
});
canvas.addEventListener('mousemove', function(event) {
if (isDrawing) {
endX = event.offsetX;
endY = event.offsetY;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(startX, startY, endX - startX, endY - startY);
ctx.stroke();
}
});
canvas.addEventListener('mouseup', function(event) {
isDrawing = false;
endX = event.offsetX;
endY = event.offsetY;
ctx.beginPath();
ctx.rect(startX, startY, endX - startX, endY - startY);
ctx.stroke();
});
});
</script>
</body>
</html>
event.offsetX
和 event.offsetY
获取准确的鼠标坐标,并在 mousemove
事件中清除画布并重新绘制矩形。mousemove
事件中只更新矩形的结束坐标,而不是每次都清除整个画布并重新绘制。通过以上示例代码和解决方法,你可以实现一个简单的基于 jQuery 和 Canvas 的鼠标画矩形功能。