canvas画板之绘画元素的框选
warning:
这篇文章距离上次修改已过440天，其中的内容可能已经有所变动。
在HTML5 Canvas上实现元素的框选，通常需要监听鼠标事件来获取起点和终点，然后在两点间绘制一个矩形框。以下是一个简单的实现示例：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var starting = false; // 标记是否正在绘制
var startPoint = null; // 起点坐标
var endPoint = null; // 终点坐标
canvas.addEventListener('mousedown', function(e) {
starting = true;
startPoint = { x: e.offsetX, y: e.offsetY };
});
canvas.addEventListener('mousemove', function(e) {
if (starting) {
// 重绘画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
endPoint = { x: e.offsetX, y: e.offsetY };
drawSelectionBox(startPoint, endPoint);
}
});
canvas.addEventListener('mouseup', function(e) {
starting = false;
endPoint = { x: e.offsetX, y: e.offsetY };
drawSelectionBox(startPoint, endPoint);
});
function drawSelectionBox(start, end) {
ctx.beginPath();
ctx.rect(start.x, start.y, end.x - start.x, end.y - start.y);
ctx.strokeStyle = 'blue';
ctx.stroke();
}
</script>
</body>
</html>在这个例子中，我们定义了一个drawSelectionBox函数来绘制选择框。当用户在画布上按下鼠标时，我们记录下起点坐标，并开始绘制模式。当用户移动鼠标时，我们重绘画布并绘制一个以鼠标位置为终点的矩形框。当用户释放鼠标时，我们完成选择框的绘制。
评论已关闭