前の記事では、長方形と円を描く方法について話しました。それらはすべて、完成できるネイティブキャンバス描画関数を持っています。この記事に記載されている丸い長方形は、他の方法でのみシミュレートできます。
通常の丸い長方形の場合、まず、その4つの角の丸い角が同じであると仮定しましょう。これは描画しやすいためです。表面を線に分割する機能を使用しており、丸い長方形が実際に4つのフックのような曲線で構成されていることを簡単に見つけることができます。
フックといえば、ARCTOを紹介する私の記事を読んだことがあるなら、すぐにこの種のグラフィックをARCTOを使用して描くことができることを理解することができます。
Arctoについて話したとき、Arctoには2番目の接線延長が彼が描いた線に影響を与えないという特徴があると述べました（上記の最後の部分）。
以下は、外国のウェブサイトで見つけた丸い長方形を描く方法です。これは最も効率的なはずです。
//丸い長方形
canvasrenderingContext2d.prototype.RoundRect = function（x、y、w、h、r）{
if（w＆lt; 2 * r）r = w / 2;
if（h＆lt; 2 * r）r = h / 2;
this.beginPath（）;
this.moveto（x+r、y）;
this.arcto（x+w、y、x+w、y+h、r）;
this.arcto（x+w、y+h、x、y+h、r）;
this.arcto（x、y+h、x、y、r）;
this.arcto（x、y、x+w、y、r）;
// this.arcto（x+r、y）;
this.closepath（）;
これを返します。
}
この関数のパラメーターは、x座標、y座標、幅、高さ、および丸い角の半径です。最後のパラメーター - 丸い角の半径に特に注意してください。
この方法では、ARCTOを4回使用して丸い長方形を描画し、各コーナーのアークは同じです。この丸い長方形の座標ポイントは、長方形と同じ左上隅ですが、その出発点はここにはありませんが、次のとおりです。
1つの行を削除して、この方法を確認できます。
もちろん、私はあなたがどんな形を描いたとしても、あなたは隠れた危険を残さないように道を閉じることを忘れないでください - あなたは道を閉じることを忘れないでください。
この方法では、最後にこれを返します。これにより、次のようなチェーン構文を使用できます。
ctx.RoundRect（200,300,200,120,20）.stroke（）;必要でない場合は削除できます。
ContexTrenderingContext2Dプロトタイプを展開したくない場合は、この方法を使用して別の機能を作成することもできます。
この機能を発見したとき、Arctoが何であるかさえわからなかったので、どのWebサイトで見つけたのか覚えていませんでした。とにかく、それは私によって独創的ではありませんでした。著者に感謝します。
前の記事では、CSS3の境界線が各コーナーまたは各コーナーの一貫性のない弧を持つ丸い長方形を簡単に描画できるため、この方法で描かれた丸い長方形の各コーナーは一貫していることを常に強調してきました。キャンバスに不規則な丸い長方形を描く方法を見つけますが、個人的には非常に難しいと思います。