js实现不规则图形贴图，点击， 事件不能超出图形外

要实现不规则图形的点击事件，可以利用 HTML5 的 Canvas 元素和 JavaScript 的鼠标事件，以及一些数学计算来实现。

以下是一个实现不规则图形贴图及点击事件的示例代码：

HTML 代码：

<canvas id="canvas" width="600" height="400"></canvas>

JavaScript 代码：

// 获取 Canvas 元素和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 绘制不规则图形
ctx.beginPath();
ctx.moveTo(200, 100);
ctx.lineTo(400, 100);
ctx.lineTo(500, 200);
ctx.lineTo(400, 300);
ctx.lineTo(200, 300);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.fillStyle = '#FF0000';
ctx.fill();

// 绑定鼠标点击事件
canvas.addEventListener('click', function(event) {
    // 获取鼠标点击的位置
    var rect = canvas.getBoundingClientRect();
    var x = event.clientX - rect.left;
    var y = event.clientY - rect.top;

    // 判断鼠标点击位置是否在不规则图形内部
    if (ctx.isPointInPath(x, y)) {
        alert('您点击了不规则图形！');
    }
});

在上面的代码中，我们使用 Canvas 元素绘制了一个不规则图形，并填充了红色。然后我们绑定了鼠标点击事件，通过鼠标点击的位置判断是否在不规则图形内部，如果是则弹出提示框。

使用 isPointInPath 方法可以判断一个点是否在不规则图形内部，该方法需要传入两个参数：x 和 y 坐标。我们可以通过鼠标事件的 clientX 和 clientY 属性获取鼠标点击的位置，然后通过 getBoundingClientRect 方法获取 Canvas 元素的位置和大小，再减去 Canvas 元素的左上角坐标，即可得到相对于 Canvas 元素的鼠标点击位置。最后，我们调用 isPointInPath 方法判断鼠标点击位置是否在不规则图形内部即可。

希望这个示例代码能够帮助您实现不规则图形的贴图和点击事件！