HTML5 画布绘图答案

【问题标题】：HTML5 Canvas DrawingHTML5 画布绘图
【发布时间】：2017-03-26 16:16:15
【问题描述】：

我有一个 100（宽度）x 100（高度）的画布，以 5 x 6 的行和列排列

它上面画了一个三角形，目前画布的排列方式使每个画布都相互重叠。我想在三角形区域添加点击

当点击在顶部画布的透明区域时，有没有办法绕过对底层画布的点击

【问题讨论】：

【解决方案1】：

使用 EaselJS，您可以使用 nextStage 属性将 CreateJS 鼠标交互传递到 DOM 中彼此下方的画布。

// Overlapping Canvases
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

// Multiple Stages
stage1 = new createjs.Stage("canvas1"),
  stage2 = new createjs.Stage("canvas2");

// Mouse events on content in each stage
stage1child.on("click", handleClick);
stage2child.on("click", handleClick);

// Stage 2 is higher in the DOM, so it will receive the mouse events first.
// Pass them on to the lower canvas/stage
stage2.nextStage = stage1;

这里有更多信息：

【讨论】：

它不仅仅适用于触控设备。有没有办法解决
您是否在舞台上启用了触控功能？

【解决方案2】：

我没有完全理解你的问题，但如果你只是想让点击注册到形状下方的 Canvas，那么你需要禁用顶部形状的鼠标交互，如下所示：

triangleShape.mouseEnabled = false;

通过这样做，此形状的任何鼠标事件都将被忽略，而是传递给它下面的对象。

【讨论】：