HTML5 はキャンバスに複雑な形状を描画します。Effects_html5 チュートリアル スキルのスクリーンショットを使用します。

1. 複雑な形状またはパスを描画する

単純な長方形ではニーズを満たせない場合、描画環境では複雑な形状またはパスを描画するための次のメソッドが提供されます。

beginPath(): 新しいパスの描画を開始します。
closePath(): 現在の点からパスの始点まで線分を描いて図形を閉じます。
fill()、ストローク(): 形状を塗りつぶすか、中空の形状を描画します。
moveTo(): 現在の点を点 (x, y) に移動します。
lineTo(): 現在の点から点 (x, y) まで直線を描きます。
arc(x,y,r,sAngle,eAngle,counterwatchwise): 点 (x,y) まで指定された半径で円弧を描きます。

2. これらのメソッドを使用して複雑な形状を描画するには、次の手順に従う必要があります。

beginPath() メソッドを使用してパスの描画を開始します。
moveTo()、lineTo()、arc() などのメソッドを使用して線分を作成します。
closePath() を使用して描画を終了し、形状を閉じます (オプション)。
ストローク() または fill() を使用して、パスの外側の境界線または塗りつぶしの形状を描画します。 fill() を使用すると、閉じられていないパスがすべて自動的に閉じられます。

3. Arc() の描画手順


4. キャンバスに複雑な形状を描画する