將兩張不規則形狀圖片拼合，並在點擊時精確判斷屬於哪張圖片。
| 方案 | 原理 | 優點 | 缺點 |
|---|---|---|---|
| CSS clip-path | CSS 裁剪路徑定義可見區域 | 無需 JS，純聲明式 | 瀏覽器兼容性較差，複雜形狀路徑難寫 |
| HTML <map><area> | 圖像映射定義多邊形熱區 | 原生支持，無依賴 | 座標需手工測量，響應式困難 |
| Canvas 像素檢測 | 繪製圖片至 Canvas，點擊時讀取像素 Alpha 通道 | 精確到像素級，支持任意形狀 | 需處理高 DPI、跨域圖片污染 |
| SVG 包裹 | 用 <svg><image>+<path> 定義點擊區域 | 矢量縮放不失真，易綁定事件 | 需將位圖轉矢量路徑 |
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const img1 = new Image(); img1.src = 'img1.png';
const img2 = new Image(); img2.src = 'img2.png';
Promise.all([img1.decode(), img2.decode()]).then(() => {
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img2, img1.width, 0);
});
canvas.onclick = e => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const pixel = ctx.getImageData(x, y, 1, 1).data;
if (pixel[3] > 0) { // Alpha > 0 表示有內容
// 判斷屬於哪張圖：根據 x 範圍或顏色特徵
}
};參考鏈接：Canvas 不規則圖片點擊檢測詳解
