使用复选框控制画布上的绘图可以通过以下步骤实现:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Drawing</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<label for="drawCheckbox">绘图开关:</label>
<input type="checkbox" id="drawCheckbox">
</body>
</html>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const drawCheckbox = document.getElementById('drawCheckbox');
drawCheckbox.addEventListener('change', function() {
if (drawCheckbox.checked) {
canvas.addEventListener('mousemove', draw);
} else {
canvas.removeEventListener('mousemove', draw);
}
});
function draw(event) {
const x = event.clientX - canvas.offsetLeft;
const y = event.clientY - canvas.offsetTop;
ctx.fillRect(x, y, 10, 10); // 绘制一个矩形
}
fillRect
方法绘制一个矩形,可以根据需要选择其他绘图方法。这样,当复选框被选中时,鼠标在画布上移动时会出现绘制的图形,当复选框取消选中时,鼠标移动不会有任何绘制效果。
注意:以上代码仅为示例,实际应用中可能需要根据具体需求进行修改和优化。
领取专属 10元无门槛券
手把手带您无忧上云