canvas学習ノート-簡単なパスを描く

3.1線分(直線経路)
線分を描く一般的な手順は、次のとおりです.moveTo(x,y)ブラシを指定した座標点(x,y)に移動lineTo(x,y)現在の端点と指定された座標点(x,y)を直線で接続するstroke()現在の線スタイルに基づいて、現在または既存のパスを描画します.
3.2長方形のパス
長方形のパスを描画するには、次の手順に従います.rect(x, y, width, height)矩形経路、座標点(x,y)、width height幅stroke()またはfill現在のスタイルに従って、パスを描画または塗りつぶします.
前述のstrokeRectまたはfillRect、またはlineTo長方形に接合
3.3円弧パス
円弧を描くapiを見てみましょう.

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x, y円弧中心、radius円弧半径、startAngle始点、endAngle円弧終点、anticlockwise 既定では時計回り、true反時計回りCSSでは回転はすべて角度(deg)ですが、arc関数で角を表す単位は で角度ではありません.角度とアークのjs式: = (Math.PI/180) * (deg).ここで弧度はx を基準とし、既定では時計回りに回転する角度で計算されます
図:
(画像は砂漠から)

ctx.beginPath();
ctx.arc(200, 100, 100, 0, Math.PI / 2, false);
ctx.closePath();
ctx.stroke();
ctx.fill();

Arc例