基本形状の描画について書きます。「長方形」「円」「楕円」「直線」「折れ線」「多角形」の基本的な書き方を見ていきます。基本形状を組み合わせることで、様々な図形を作成することができます。
- 基本形状の種類
- rect:長方形の記述と属性
- circle:円の記述と属性
- ellipse:楕円の記述と属性
- line:直線の記述と属性
- polyline:折れ線の記述と属性
- polygon:多角形の記述と属性
- まとめ
基本形状の種類
- rect:長方形
- circle:円
- ellipse:楕円
- line:直線
- polyline:折れ線
- polygon:多角形
rect:長方形の記述と属性
<rect x="10" y="10" width="100" height="100" />
- x:左上の頂点のx座標
- y:左上の頂点のy座標
- width:幅
- height:高さ
- rx:角丸。x軸方向の半径
- ry:角丸。y軸方向の半径
角丸も描画できる。
circle:円の記述と属性
<circle cx="30" cy="25" r="20" fill="magenta"/> <circle cx="50" cy="35" r="20" stroke-width="4" stroke="red" fill="magenta"/> <circle cx="70" cy="45" r="20" stroke-width="4" stroke="red" fill="none"/>
- cx:円の中心のx座標
- cy:円の中心のy座標
- r:半径
ellipse:楕円の記述と属性
<ellipse cx="20" cy="35" rx="14" ry="28" fill="green"/> <ellipse cx="50" cy="35" rx="30" ry="20" stroke-width="3" stroke="yellowgreen" fill="blue"/> <ellipse cx="78" cy="35" rx="14" ry="28" stroke-width="3" stroke="blue" fill="none"/>
- cx:円の中心のx座標
- cy:円の中心のy座標
- rx:x軸方向の半径
- ry:y軸方向の半径
line:直線の記述と属性
<line x1="10" y1="10" x2="90" y2="60" stroke-width="10" stroke="green"/>
- x1:1個目のx座標
- y1:1個目のy座標
- x2:2個目のx座標
- y2:2個目のy座標
polyline:折れ線の記述と属性
polyline要素のpoints属性に数値を指定する。
<polyline points="20,50 10,40 10,20 20,10 40,10 50,20 50,50 60,60 80,60 90,50 90,30 80,20 60,20 40,50" stroke-width="4" stroke="tomato" fill="khaki"/>
- points:点のx座標とy座標を指定。スペースで区切る。
polygon:多角形の記述と属性
polygon要素のpoints属性に頂点の位置を指定する。
<polygon points="20,50 10,40 10,20 20,10 40,10 50,20 50,50 60,60 80,60 90,50 90,30 80,20 60,20 40,50" stroke-width="4" stroke="indianred" fill="mistyrose"/>
- points:点のx座標とy座標を指定。スペースで区切る。
まとめ
基本形状の種類と書き方について書きました。基本形状の組み合わせで簡単な図形が作成できます。複雑な図形を作成するにはイラストレーターなどのソフトを使った方が良いです。