少し前に、デザイナーがサイトをワイルドウェストとして様式化するタスクが登場しました。 レイアウトデザイナーとして、私はデザイナーから写真や背景を作成する仕事をもらいました。 不明な数量と不明なサイズの各ページ。 複雑な背景と画像に透明な穴が必要なため、タスクはさらに悪化しました。 つまり border-radius：インセットを使用する必要がありました。インセットは、実際には存在しません...各ページとケースの下に大量の写真をカットすることは、もちろん非現実的で無意味です。 顧客は「エクスプローラー6のフォロワー」ではありませんでしたので、jQueryとHTML5の束で生活を簡素化することにしました。
どうした
結果は小さなjQueryプラグインです。 原理は非常に簡単です。セレクターによって必要な画像を見つけ、非表示にし、元の画像が複製されるのと同じ寸法でその隣にキャンバスを作成し、穴を開けます。 オプションで、プラグインは3つのパラメーターを受け入れます：丸い半径の配列（ピクセル単位）、境界線の太さ、およびその色（もちろん、必要な場合）。
例：
$(".block-4 img").borderRadiusInset({ radius: [30,60,0,20], width: 10, color: "#00719e" });
1〜4つの値をradius配列に渡すことができます。これは、border-radiusのcssの半径と同じ原理で機能します。
- すべての半径は同じです。
- 最初の値は左上および右下のラウンドの半径であり、2番目は残りのラウンドです。
- 最初は左上、2番目は右上、左下、3番目は右下です。
- 各ラウンドには、左上から時計回りに半径があります。
プラグインは画像でのみ機能しますが、適切なレベルの異常またはスタイルの緊急の必要性がある場合、ページの読み込み後に静的であるが読み込み前にサイズが不明なコンテンツのブロックの背景を整理することもできます。
なぜctx.globalCompositeOperationはctx.clip（）よりもホーリーキャンバスの方が優れているのか
実際、すべては写真から明らかです。 どこでも丸いですが、ctx.clip（）を使用する場合はクロムで、キャンバスの穴は段階的に引き裂かれたエッジで取得されます（他のブラウザではすべてがうまくいきます）。 ここで解決策が見つかりました 。 これが完璧主義者の地獄が終わった場所です。
参照資料
例に触れる： jsfiddle.net/53vq5pn1
ソースを掘る： github.com/tegArt/border-radius-inset
ラウンド？*
* 著者の感情を伝える最後の段落は、シェルドンクーパーの声で、対応するイントネーションとともに読む必要があります。
はい、ラウンド。 円と角度。 なぜ丸くないのですか？ 角が丸くないので、丸くなっているからです。 「ラウンド」は形容詞であり、原則としてドーナツも丸い。 しかし、ラウンドはWeb開発の新語であり、レイアウトデザイナーとデザイナーの作業を容易にし、同僚にあなたの考えを伝える時間を週に平均4（4！）秒短縮します。 私はこれまで以上に真剣です。 皆さん、これは突破口です。