getContext('2d')でパスを作成し、設定することでキャンバスをクリップできることを知っていますglobalCompositeOperation。
-webkit-clip-path、またはclip-path他のブラウザー (私は Chrome) でキャンバスをクリップできる場合と、できない場合があることに気付きました。
この HTML の使用:
<canvas width="300" height="60"></canvas>
およびCSS:
canvas {
-webkit-clip-path: polygon(50% 33%, 75% 10%, 80% 80%, 60% 75%, 40% 60%, 20% 10%, 40% 20%, 50% 33%);
}
これを生成します：
これは正しいようです。
ただし、キャンバスの高さを変更すると、クリップに失敗することに気付きました。
<canvas width="300" height="250"></canvas>
生成:
私の推測では、浮動小数点のクリッピング (パーセンテージがピクセルではなくピクセル間でクリッピングする) に問題があるが、パーセントからピクセル座標に変更してもクリッピングされないということでした。
*それぞれの jsfiddle ページへのリンクは次のとおりです。
一方が機能するのに他方が機能しない理由を誰かが知っていますか?
キャンバス要素を CSS でクリップする安定した方法はありますか、それともキャンバス コンテキスト メソッドを使用する必要がありますか?
私が尋ねる理由は、可能な限り少ない js を使用したいからです。CSSに簡単に入れることができる座標の文字列があります。一方、ctx.beginPath()...ctx.moveTo()...ctx.lineTo()...ctx.lineTo()...メソッドを使用するには、ポイントに対して for ループを実行する必要があります。
また、誰かがそれを説明できるなら、最初の例がなぜうまくいったのか、私は非常に興味があります。ありがとう！:)