JavaScript Canvas clearHitRegions 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas clearHitRegions 方法。此方法对于管理 HTML canvas 上的交互区域至关重要。掌握命中区域是创建交互式图形的关键。
基本定义
命中区域是 canvas 上可以响应用户交互（如单击或触摸）的区域。clearHitRegions 方法会删除 canvas 上所有已定义的命中区域。这有助于管理动态交互元素。
主要的命中区域方法是 addHitRegion、removeHitRegion 和 clearHitRegions。这些方法与路径绘制方法配合使用，以创建交互式 canvas 元素。
基本 clearHitRegions 用法
此示例演示了如何从 canvas 清除所有命中区域。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Basic clearHitRegions</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Add a hit region
ctx.beginPath();
ctx.rect(50, 50, 100, 100);
ctx.addHitRegion({id: 'square'});
// Clear all hit regions
ctx.clearHitRegions();
</script>
</body>
</html>
在这个基本示例中，我们创建了一个 canvas 元素并获取其 2D 上下文。我们向 canvas 添加了一个 ID 为“square”的矩形命中区域。
clearHitRegions 方法会删除 canvas 上的所有命中区域。当您需要完全重置交互区域时，这非常有用。
动态命中区域管理
此示例展示了如何使用 clearHitRegions 动态管理命中区域。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Hit Regions</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<button id="clearBtn">Clear Regions</button>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const clearBtn = document.getElementById('clearBtn');
// Add multiple hit regions
function addRegions() {
ctx.beginPath();
ctx.rect(20, 20, 80, 80);
ctx.addHitRegion({id: 'region1'});
ctx.beginPath();
ctx.rect(120, 20, 80, 80);
ctx.addHitRegion({id: 'region2'});
}
// Clear button handler
clearBtn.addEventListener('click', () => {
ctx.clearHitRegions();
console.log('All hit regions cleared');
});
addRegions();
</script>
</body>
</html>
在这里，我们创建了两个矩形命中区域和一个用于清除它们的按钮。addRegions 函数定义了两个不同的命中区域。
当按钮被点击时，clearHitRegions 会删除所有命中区域。这种模式对于区域经常变化的动态 UI 非常有用。
互动游戏示例
此示例在简单的游戏场景中演示了 clearHitRegions。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Game Hit Regions</title>
</head>
<body>
<canvas id="gameCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let score = 0;
function createTarget(x, y) {
ctx.beginPath();
ctx.arc(x, y, 30, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
ctx.addHitRegion({
id: 'target',
cursor: 'pointer'
});
}
function resetGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearHitRegions();
createTarget(
Math.random() * (canvas.width - 60) + 30,
Math.random() * (canvas.height - 60) + 30
);
}
canvas.addEventListener('click', (e) => {
const region = e.region;
if (region === 'target') {
score++;
console.log('Score:', score);
resetGame();
}
});
resetGame();
</script>
</body>
</html>
这创建了一个简单的游戏，点击红色目标会增加分数。每个目标都是一个响应点击的圆形命中区域。
resetGame 函数使用 clearHitRegions 在创建新目标之前删除旧目标。这确保了干净的交互。
多种区域类型
此示例展示了如何使用 clearHitRegions 管理不同类型的命中区域。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Multiple Region Types</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<button id="resetBtn">Reset All Regions</button>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const resetBtn = document.getElementById('resetBtn');
function setupRegions() {
// Button region
ctx.beginPath();
ctx.rect(50, 50, 100, 50);
ctx.fillStyle = '#4CAF50';
ctx.fill();
ctx.addHitRegion({
id: 'greenBtn',
cursor: 'pointer'
});
// Draggable region
ctx.beginPath();
ctx.arc(300, 100, 40, 0, Math.PI * 2);
ctx.fillStyle = '#2196F3';
ctx.fill();
ctx.addHitRegion({
id: 'draggable',
cursor: 'move'
});
}
resetBtn.addEventListener('click', () => {
ctx.clearHitRegions();
setupRegions();
console.log('Regions reset');
});
canvas.addEventListener('click', (e) => {
if (e.region === 'greenBtn') {
alert('Button clicked!');
}
});
setupRegions();
</script>
</body>
</html>
此示例创建了两个具有不同行为的独立命中区域。一个绿色的按钮区域会显示警报，而一个蓝色的圆圈是可拖动的。
重置按钮使用 clearHitRegions 在重新创建所有区域之前将其删除。这种模式对于复杂的界面很有用。
高级区域管理
此示例演示了高级命中区域生命周期管理。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Advanced Region Management</title>
</head>
<body>
<canvas id="appCanvas" width="500" height="400"></canvas>
<div>
<button id="addBtn">Add Region</button>
<button id="clearBtn">Clear Regions</button>
<span id="counter">Regions: 0</span>
</div>
<script>
const canvas = document.getElementById('appCanvas');
const ctx = canvas.getContext('2d');
const addBtn = document.getElementById('addBtn');
const clearBtn = document.getElementById('clearBtn');
const counter = document.getElementById('counter');
let regionCount = 0;
function addRandomRegion() {
const x = Math.random() * (canvas.width - 80) + 40;
const y = Math.random() * (canvas.height - 80) + 40;
const size = Math.random() * 30 + 20;
const hue = Math.floor(Math.random() * 360);
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = `hsl(${hue}, 70%, 60%)`;
ctx.fill();
const regionId = `region-${regionCount}`;
ctx.addHitRegion({
id: regionId,
cursor: 'pointer'
});
regionCount++;
counter.textContent = `Regions: ${regionCount}`;
}
function clearAllRegions() {
ctx.clearHitRegions();
ctx.clearRect(0, 0, canvas.width, canvas.height);
regionCount = 0;
counter.textContent = `Regions: ${regionCount}`;
}
addBtn.addEventListener('click', addRandomRegion);
clearBtn.addEventListener('click', clearAllRegions);
canvas.addEventListener('click', (e) => {
if (e.region) {
console.log(`Clicked region: ${e.region}`);
}
});
</script>
</body>
</html>
这个高级示例展示了动态命中区域的创建和管理。用户可以添加随机的圆形区域并完全清除它们。
clearAllRegions 函数使用 clearHitRegions 和 clearRect 来完全重置 canvas。这展示了全面的区域生命周期管理。
来源
在本文中，我们探讨了使用 clearHitRegions 在 HTML canvas 上管理命中区域的各种技术。掌握这些方法对于创建交互式 canvas 应用程序至关重要。
作者
列出 所有 JS Canvas 教程。