14

円弧の外側領域をクリッピングするための多くの例を見つけました(例:この例)。代わりに円弧形状の内側をクリップする方法がわかりません。

これは、現在外側の領域をクリッピングしている方法の例です。これは、本質的に私が望むものとは逆です:

ctx.save();

ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.clip();

ctx.beginPath();
ctx.lineWidth     = 1;
ctx.shadowBlur    = 10;
ctx.shadowOffsetX = shadowOffset;
ctx.shadowColor   = '#000000';
ctx.strokeStyle   = '#000000';
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.stroke();

ctx.restore();
4

3 に答える 3

10

スタイルの「反転した」クリップ形状を使用して確実にクリップできます。最初に画面のアウトラインを描画し、次にクリッピング パスを描画し (beginPath を使用せずに)、パスとクリップを閉じます。
このように、あなたが説明する形状は画面内の「穴」です。
パス関数は閉じたパスを記述する必要があります。

デモはこちら : http://jsfiddle.net/gamealchemist/9DuJL/40/
交差しなければ、複数の形状でも機能することがわかります。

標準クリップの例

元に戻すクリップの例

コードは次のようになります。

// clips the canvas with the invert of provided path function
// if pathFunction is an array, remove clips defined by all functions
function clipRevert(pathFunction) {
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, ctx.canvas.height);
    if (Array.isArray(pathFunction)) pathFunction.forEach(execute);
    else pathFunction();
    ctx.clip();
}


function execute(fn) {
    return fn();
}

使用例：（円の反転クリップを使用して画像を描画します）：

function circlePath(x, y, r) {
    ctx.arc(x, y, r, 0, Math.PI * 2, true);
}

window.clipRevertExample = function () {
    ctx.save();
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    clipRevert(circlePath.bind(null, 100, 60, 40));
    ctx.drawImage(img, 0, 0);
    ctx.restore();
}

最後の注意: 実際には、減算する任意のベース シェイプを選択できます。

于 2013-09-24T23:42:52.813 に答える