HTMLで何か書いてるみなさーん!
たまーにちょっと図が欲しいんだよなぁってことありません?
そんでペイント立ち上げて微妙にずれた殴り書き的な画像作って張り付けたりするんですよね。わかります。
そこで、実は簡易的なお絵描きならHTMLタグだけで表現できるって知ってました?
僕もまだ知ってから1年くらいなんでいつから使えたのかはわからないんですが、
少なくともHTML5が出てきたころはCanvasくらいしか言われてなかったのでそれよりは新しいものと思います。
SVGは元々画像形式だったりするんですが、XMLでコードにて画像を描画する性質上、HTMLタグで書いても画像ができちゃうようにしようという流れになったのではないかと推測してます。
(詳しくは調べてね!)
本当ならこの手の物はQiitaに書きたかったんですが、SVGタグが適用されなかったので、こっちで書きました。
図は出るけど、コードが見にくいのは勘弁してねb
前置きはもういいので本題行こう!
基本はこう書くだけ
<html>
<head>
<title>SVG test</title>
</head>
<body>
<svg width="200" height="200">
<circle cx="100" cy="100" r="20" fill="red"></circle>
</svg>
</body>
</html>
するとどうでしょう。
あら不思議!もう絵が描けてる!!!
どういうことかというと、svgタグが全体のキャンバスみたいになってて、width(横幅)とheight(縦幅)で大きさを指定します。
(キャンバスって表現したけど<canvas>とは関係ないよ!)
そしてその中にcircleタグで円を描きます。cxとcyが円の中心座標で、rが半径の長さになります。
fillは塗りつぶしの色指定ですね。CSSと同じ指定の仕方になるので、#FF0000とか番号指定でも、色名指定でもOK
四角と丸と線でおえかき
SVGタグの中に書けるタグがいくつかあって、
さっきの円がcircle、四角がrect、線がlineというタグになります。
図を出していきましょう。
<svg width="200" height="200">
<rect x="50" y="50" width="50" height="80" fill="blue"></rect>
<circle cx="100" cy="100" r="20" fill="red"></circle>
<line x1="10" y1="120" x2="160" y2="30" stroke="black"></line>
</svg>
ほら、もうなんかめっちゃ簡単に絵が描けそうって思わない?
そして本題のオセロ盤を描こうって話、基本四角と円と線が描ければ十分表現できるよね!
っと、その前にrectとlineの説明もしなきゃ。
rectのxとyは、四角の左上の点の座標。width、height、fillはもう説明不要だよね!
lineのほうはx1とy1が線の開始点の座標。同じようにx2とy2が終了点の座標。
色の付け方は他と違うので注意してね。strokeで色指定します。
(四角と円はその枠線の内側を塗りつぶすという意味でfillに対して、線は塗りつぶす図形がないので線そのものの色を指定。)
オセロ盤を描こう
まぁ、ここまで読んでたらもうあとはお好きにという感じですが、
一応描くだけ描いてみましょう。
<svg width="320" height="320">
<rect x="0" y="0" width="320" height="320" fill="green"></rect>
<line x1="40" y1="0" x2="40" y2="320" stroke="black"></line>
<line x1="80" y1="0" x2="80" y2="320" stroke="black"></line>
<line x1="120" y1="0" x2="120" y2="320" stroke="black"></line>
<line x1="160" y1="0" x2="160" y2="320" stroke="black"></line>
<line x1="200" y1="0" x2="200" y2="320" stroke="black"></line>
<line x1="240" y1="0" x2="240" y2="320" stroke="black"></line>
<line x1="280" y1="0" x2="280" y2="320" stroke="black"></line>
<line x1="0" y1="40" x2="320" y2="40" stroke="black"></line>
<line x1="0" y1="80" x2="320" y2="80" stroke="black"></line>
<line x1="0" y1="120" x2="320" y2="120" stroke="black"></line>
<line x1="0" y1="160" x2="320" y2="160" stroke="black"></line>
<line x1="0" y1="200" x2="320" y2="200" stroke="black"></line>
<line x1="0" y1="240" x2="320" y2="240" stroke="black"></line>
<line x1="0" y1="280" x2="320" y2="280" stroke="black"></line>
</svg>
緑の正方形描いて、縦横8分割ずつ(間の線を7本)描けば、もうオセロ盤だよね。
この上に石を置いていきます。ちなみにタグが後から出てきた方が上に表示されます。
z-indexみたいな表示順を変更する機能は無いようです。
さっきのlineたちの続きにcircleを追加していきます。
<circle cx="100" cy="100" r="16" fill="black"></circle>
<circle cx="180" cy="140" r="16" fill="black"></circle>
<circle cx="180" cy="180" r="16" fill="black"></circle>
<circle cx="220" cy="180" r="16" fill="black"></circle>
<circle cx="140" cy="100" r="16" fill="white"></circle>
<circle cx="140" cy="140" r="16" fill="white"></circle>
<circle cx="140" cy="180" r="16" fill="white"></circle>
<circle cx="140" cy="220" r="16" fill="white"></circle>
いやー楽勝ですね。
このアメブロならわざわざ画像を作らずにhtmlでオセロ盤面が表現できるのは大きい。
他のブログサービスでの対応があんまりなさそうなのが悲しい…
と、いうわけで今回はHTMLのSVGタグを使ってオセロ盤を表現してみようというお題でした。
いかがでしたか?()
ちなみにJavaScriptを使って動的に書き換える方法は、通常のBOM操作とは若干違うっぽいので
そっちも需要があれば続きを書きますわ。
ではさらば!










































