javascript - html5 canvas - 合并两个裁剪区域 - James Bond Gunbarrel

Question

我刚开始使用 Canvas 来获得这种效果:

“詹姆斯邦德枪管 View 开始” http://www.youtube.com/watch?v=sfXazFp68cE

我几乎成功了:

http://jsbin.com/uyaker/8/edit

现在你可以看到我用两个圆圈夹住我的 Canvas (至少我尝试这样做)......但问题是重叠的区域不再被夹住......

ctx.clearRect(0, 0, canvas.width, canvas.height);    
ctx.save();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.moveTo(cx + r, cy);
ctx.arc(cx, cy, r, 0, Math.PI*2, true);
// check if to draw a fixed circle, every 200 pixels for 100 pixels
if(goingright && cx % 200 < 100) {
    ctx.moveTo(cx - cx % 200 + r, cy);
    ctx.arc(cx - cx % 200, cy, r, 0, Math.PI*2, true);
}
ctx.closePath();
ctx.clip();

ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.restore();

也许不使用裁剪就可以实现这种效果，但是给 Canvas 一个 css 背景图像并绘制除圆圈以外的所有内容......但我真的不知道该怎么做:/。

Answer 1

也许不使用裁剪就可以实现这种效果......但我真的不知道该怎么做

是的，这是可能的，您需要创建一个可以完成所有工作的路径:

context.beginPath();
context.moveTo(x, y);
// Draw your big shape, in your case is a rectangle (4 point)
context.lineTo(xn, yn);
context.closePath();
// Now the context knows that every path that will be added without .beginPath(), will clip the current path
context.arc(cx, cy, r, 0, Math.PI * 2, true);
context.closePath();
context.fill(); // Fill with color all the area except the arc

示例:http://jsfiddle.net/drhWb/

保存、恢复和裁剪上下文是非常昂贵的操作，因此您应该使用这种方法是您需要的正确方法。