HTML5 Canvas 绘图

Question

我有一个 100（宽）x 100（高）canvas 以 5 x 6 的行和列排列

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

当点击位于顶部的透明区域时，有没有一种方法可以将点击绕过底层 canvas canvas

Answer 1

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

triangleShape.mouseEnabled = false;

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

Answer 2

使用 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;

这里有更多信息：

HTML5 Canvas 绘图

HTML5 Canvas Drawing

html

canvas

createjs