1.

Canvas API で図形を描画する方法

▶
編集

Canvasでの四角形の描き方

 

四角形

context . fillRect(x, y, w, h)　

塗りつぶしの四角形を描写
context . strokeRect(x, y, w, h)

輪郭の四角形を描写
context . clearRect(x, y, w, h)

四角形の形にクリアする

x, yには矩形の左上端の座標を、widthに矩形の横幅を、heightに縦幅を引数として渡す。

 

 

円、円弧

context . arcTo(x1, y1, x2, y2, radius)

 直前の座標と直線でつながる円弧を作成する
context . arc(x, y, radius, startAngle, endAngle [, anticlockwise ] ) 

円弧を作成する

 

x：円の中心のx座標

y：円の中心のy座標

radius：円の半径

startAngle：円弧を描き始める角度。x軸の向き（右方向）から見て、右回りの角度をラジアンで指定。

endAngle：円弧を描き終える角度。x軸の向き（右方向）から見て、右回りの角度ラジアンで指定。

anticlockwise：円弧を描く向きを真偽値で指定。trueを指定すると反時計回り（左回り）に、falseを指定すると時計回り（右回り）で円弧を描く。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 図形
  2. 色
  3. 直線・曲線(パスでの描画)
2026-05-15 05:24:41 guest 194

人気ページ

最近更新/作成されたページ