HTML5画布绘制

Question

我有一个100（宽）×排成一列和5×6

柱100（高度）画布其对他们绘制的三角形目前画布被布置在这样的方式每一幅画布都互相重叠。我想补充一下就成的三角形区域

是有办法绕过点击下面的画布时，点击是在帮帆布

Answer 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; 

下面是详细信息：

• nextStage documentation
• TwoStages demo in GitHub
• TwoStages demo on createjs.com

Answer 2

我没有完全理解你的问题的透明区域，但如果你只是想为点击注册到画布波纹管的形状，那么你需要禁用顶部形状的鼠标交互，就像这样：

triangleShape.mouseEnabled = false;

通过这样做，任何鼠标事件会忽略了这个形状，而是传递给下面的物体。