3

この種の効果を得るためにキャンバスを使い始めたところです。

「ジェームズ・ボンド ガンバレル ビュー スタート」 http://www.youtube.com/watch?v=sfXazFp68cE

私はほとんどそこに着くことができました：

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

ご覧のとおり、キャンバスを2つの円でクリップします（少なくとも試してみます）...しかし、問題は、オーバーラップする領域がもうクリップされないことです...

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();

たぶん、この効果はクリッピングを使わなくても可能ですが、キャンバスにcssの背景画像を与えて、円以外のすべてを描画します...しかし、私はそれを行う方法が本当にわかりません:/.

4

1 に答える 1

2

Maybe this effect is possible without using clipping ... but I don't really know how to do that

はい、可能です。すべての作業を行うパスを作成する必要があります。

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/

コンテキストの保存、復元、およびクリッピングは非常にコストのかかる操作であるため、このアプローチを使用する必要があるのは正しい方法です。

于 2012-08-18T08:50:04.730 に答える