グラフィックスの利用

1. はじめに

(1)　グラフィック学習のよさ
　javascriptのようなプログラミング言語を学習するとき，変数，関数，if分岐，forループなど抽象的な内容の学習に耐えなければなりません．これは一定期間は必要なことですが，「できた！」という達成感になかなかつながらないことがあります．
　このようなときに，「息抜き」にグラフィックをやって見ると，「できた！」ということが手に取るように，目に見えるように分かります．
　この教材の管理人がグラフィックを軽視しているわけではありませんが，プログラミング言語を総合的に学ぶ中で，このように成果が見えやすい項目とロジックで進める項目を代わる代わる学習すると，気分転換しやすく，学習がうまく進むようです．

(2)　SVGとは
　画像を表示する方法には大きく分けて２つあり，「点」を元にして画像を描くラスタ形式と「座標」を元にして画像を描くベクタ形式があります．
　Web画面上に貼り付けて使われるJPEGファイル（写真など）やPNG，GIFファイル（イラスト画像など）は，点を元にして表示するラスタ形式で，取り扱いが簡単ですが，拡大すると境界線のギザギザが目立ってきます．また，大きな画像を表示するには大きなサイズの画像ファイルが必要です．
　これに対して，このページで学習するのは，ベクタ形式の画像で
<line x1="10" y1="20" x2="100" y2="200" />
のように2点(10,20)と(100,200)の間にlineを引くというコマンドを書くだけで直線が引け，どんなに拡大してもギザギザが出ないという長所があります．
　Web上でベクタ形式の画像を表示するのに使われる，SVGは，Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略称で，国際規格になっています．

2. 簡単な練習(line)

(1)初めに，次の枠内をコピーして，テキストエディタの新規ファイルに貼り付け，abc1.htmなどのHTMLファイルとして保存（漢字コードはShift_JIS，windowsメモ帳ならANSI）し，できたファイルをブラウザで読み出してください． (2)先頭行から</head>までは毎回コピーして使えばよいので，ここでは触れません．
　HTML文書の基本として，<body>から</body>までの間の記述が画面に表示されます．

までは，上に述べた国際規格を利用するために決まった書き方なので，これもコピーするだけです．

　この結果，右図のように，見えるはずです．（枠線は外側も中側もない）

(3)まず，自分で考えなければならないのは，
width="100" height="100"
の部分です．これは，その場所に横100ピクセル，縦100ピクセルの画像描画領域を確保するということです．その前の文字列「直線です」の後に改行<br>がないので，「直線です」の「す」の右下端から見て横100ピクセル，縦100ピクセルの画像描画領域になります．特に指定がなければ下端がそろうので，描画領域の方が上に高くなり，文字が低く見える．
(4)viewBoxは，他のプログラミング言語でビューポートと呼ばれるものになっていて，viewBox="x, y, w, h"のようにカンマ区切りで書いてもよく，viewBox="x y w h"のようにスペース区切りで書いてもよい．
　ただし，座標は，画面上の物理座標と同じでxは左から右へ，yは上から下へ増えます．
　1番目の引数は左端のx座標，2番目の引数は上端のy座標を表します．
　3番目の引数wは横幅を，4番目の引数hは縦幅を表します．（3番，４番は座標ではないので注意）

　この
width="100"
height="100"
viewBox="-5 -5 10 10"
の例では，画面上の100ピクセル×100ピクセルの描画領域に，左上端を(−5, −5)とする横幅10，縦幅10の領域を投影するということになります．それはつまり，左上端(−5, −5)，右下端(5, 5)の領域を投影するということです．

(5)何十年も前に，BASICでビューポートの設定を習ったときに，「投影などと余計なことをしなくても，直接描けば簡単じゃないか！」とぼやいたものですが，それは間違っていました…やはり，ビューポートの設定をする方がよいです．

　例えば，高校数学では
y=(x−1)(x−2)のグラフというのを解説することがありますが，このグラフは右図のように100ピクセル×100ピクセル程度の大きさに表示すれば見やすいですが，元の数学座標の通り横幅3×縦幅3にしか描けないとなると，この小さなもの→

になり，解説になりません．画面サイズに合わせて
y=(x−100)(x−200)のグラフしか説明できないということでは不便です．
　つまり，どんなジャンルの話でも，説明したい大きさ（ビューポートの大きさ，原点のとり方）と見やすい大きさ（描画領域の縦横）のどちらも生かすためには両方とも指定するということです．

(6)描画領域の縦横とviewBoxの縦横が別々に指定できますが，縦横比がそろっていない指定をした場合，アスペクト比の設定を変えない限り，縦横比が変わらず，描画領域で余る部分が余白になります．（写真を印刷するときに，原版と縦横比の異なる印画紙に印刷すると，余白ができるのと同じ）
(7)viewBoxからはみ出す図形を描いた場合，はみ出す部分は単に描画されないだけで，エラーとはなりません．

　例えば，width="100" height="100" viewBox="-5 -5 10 10"の例で<line x1="0" y1="0" x2="10" y2="5"..>とすると，右図のように，直線の内で表示されない部分があります．
　また，右の図は同じ幅の直線を描いたものですが，左側の直線は細く見えます．

これは，「数学で習う直線とは異なり，コンピュータ画面に表示される直線には幅があり」

(x1,y1)から(x2,y2)に引かれた直線は，(x1,y1)と(x2,y2)を中心とする幅のある直線なので，描画領域の境界線上に描かれた直線は半分が表示されていないからです．

(8)lineの書き方

1)(x1, y1)は始点の座標，(x2, y2)は終点の座標です．
この x1="" y1="" x2="" y2="" は，このまま書き写してください．x3=""などとすると想定通りの直線になりません．
2)stroke=""は，直線の色を表し，color nameまたは#rrggbbの形で16進けたずつの色番号で指定できます．
color nameは名前で色を指定する方法で，stroke="red"で赤線になります．

red:赤，green:緑，blue:青，black:黒，white:白，などの原色は分かり易いですが，cyan:シアン，skyblue:空色，aqua:水色など200種類以上の色が名前で使えます．

色番号で指定するときは，stroke="#ff0000"が赤，同様にして#00ff00が緑，#0000ffが青，#000000は黒，#ffffffが白，#00ffffがシアンと水色，#87ceebが空色，などとなります．

この教材の管理人の個人的な考えでは，color nameを使うと，原色以外は覚えられないので，色番号で33ずつ増減して調整するのが楽です．（赤だけ濃さを変えると#00....,#33....,#66....,#99....,#cc....,#ff....など．このようにすると，濃さの調整も多過ぎず，色数の少ないモニター画面を使っている読者にもほぼ同じように見えるはずです．）

　なお，stroke=""を省略すると直線が表示されませんので注意です．
3)stroke-width=""によって，直線の幅を指定します．

　このstroke-widthに指定する直線の幅は，cm,pxなどいろいろな単位を付けることもできますが，単位を付けると描画領域とviewBoxの拡大（縮小）比の影響を受けます．
　むしろ，単位を付けずに，viewBoxのスケールの大きさで測ったものとすると簡単です．例えば，viewBox="-5 -5 10 10"の場合，左上端の座標を(−5, −5)とする横幅10，縦幅10の範囲が描かれるので，stroke-width="1"とすると，右図のような太い棒になります．
　stroke-widthを省略すると，stroke-width="1"になります．
　通常の太さの直線にするには，stroke-widthに小数を使って，stroke-width="0.1"などとすればよいでしょう．

4)stroke-dasharray=""は破線，点線，一点鎖線などを描くときに使います．これを省略すれば，単に塗りつぶした普通の直線になります．

i) stroke-dasharray="1"のように1つの数を指定すると，鎖線の幅が1になる．
これは，stroke-dasharray="1 1"とした場合と同じになります．（カンマ区切りでもよい．以下同様）
ii) stroke-dasharray="2 1"のように２つの数を並べると，塗る長さ2，塗らない長さ1の繰り返しになる．
iii) stroke-dasharray="2 1 1"のように３つの数を並べると，塗る長さ2，塗らない長さ1，塗る長さ1，塗らない長さ2，塗る長さ1，塗らない長さ1の繰り返しとなります．
iv) stroke-dasharray="2 1 1 1"のように３つの数を並べると，塗る長さ2，塗らない長さ1，塗る長さ1，塗らない長さ1の繰り返しとなります．

※以上のように，鎖線，１点鎖線，２点鎖線などを描くには，「偶数個の数字を並べる方が，見た目のままで分かり易い」ようです．

stroke-dasharray="0.5 0.5"で鎖線
stroke-dasharray="1 0.2 0.2 0.2"で１点鎖線
stroke-dasharray="1 0.2 0.2 0.2 0.2 0.2"で２点鎖線

5)
　それぞれの命令文の末尾は />で終らなければなりません．これも約束事として割り切りましょう．

【例題１】

　数学でよく使われるx,y平面について，右図のようにx軸とｙ軸を実線で描き，x=1, y=1の直線を鎖線で描いてください．
　なお，背景色が明るいので，直線は濃い色を使ってください．

（答案例）

【例題２】

　数学でよく使われるx,y平面について，右図のようにx軸とｙ軸を実線で描き，x=−5～5, y=−5～5の直線を鎖線で描いてください．
　なお，背景色が明るいので，直線は濃い色を使ってください．

（答案例）
前問と同様であるが，HTML文書のボディ部分に次のように書くとよい． ※なお，同じ場所に重ねて描画すると「後から描いた方が上に描かれる」（=後出しジャンケンが勝つ）ので，x軸，y軸も鎖線で描いてから，実線で描きなおしてもよい．（上の答案例ではx = 0, y =0のとき（座標軸に重なるとき）は描画せずにcontinue;としている．）

(9)circleの書き方

<circle cx="9.99" cy="9.99" r="9.99" stroke="color1" stroke-width="9.99" fill="color2" />…①
または
<circle cx="9.99" cy="9.99" r="9.99" style="stroke:color1;stroke-width:9.99;fill:color2;" />…②
の書き方で円を描くことができます．
9.99の箇所には10進数の整数や小数，color1, color2の箇所にはblack，redのようなcolor nameか#000000，#ff0000;のような色番号が入ります．

以下は，width="100" height="400" viewBox="0 0 10 40"の設定での見え方の例を示します．
cx="",cy="", r=""は各々ビューポートにおけるえんの中心のｘ座標，ｙ座標，半径でこれらは必須項目です．

1)は<circle cx="5" cy="5" r="4" stroke="green" stroke-width="0.1" fill="none"/>とした場合で，strokeにより円周（輪郭線）の色を，stroke-widthにより輪郭線の幅を，fillにより円の内部を塗りつぶす色を指定します．fill="none"により「塗りつぶしなし」になります．
　ビューポートの横幅が10なので，stroke-widthはその幅に対応したスケールで指定しなければなりません．stroke-width="1"などとすると，かなり分厚い輪郭線になりますので，ここでは0.1にしています．
2)は<circle cx="5" cy="15" r="5" stroke="yellow" stroke-width="0.2" />とした場合で，fillを省略すると円の内部が黒で塗りつぶされます．
3)は<circle cx="5" cy="25" r="4" stroke="blue" fill="none"/>とした場合で，stroke-widthを省略するとビューポートのスケールにおける幅1になります．
4)は<circle cx="5" cy="35" r="5" stroke="blue" />とした場合で，stroke-widthを省略したのでビューポートのスケールにおける幅1になり，fillを省略したので円の内部が黒で塗りつぶされています．
　また，(5,35)を中心とする半径5の円は，右左下の周上がビューポートの端になるので，そこを中心とする幅1（省略の結果）の輪郭線は外側が表示されず，最も薄い箇所で半分の厚さになっています．

5)は<circle cx="5" cy="5" r="4.1" stroke-width="0.2" fill="#ffff00" />のように，strokeを省略した場合で，輪郭なしになり，円の内部はfillの色：黄色で塗りつぶされます．
6)は<circle cx="5" cy="15" r="3.2" stroke-width="0.2" />のようにstrokeとfillを省略した場合で，輪郭なしｄｅ，円の内部は黒で塗りつぶされます.
7)は<circle cx="5" cy="25" r="5" fill="#ff0000" />のように，strokeとstroke-widthを省略した場合で，輪郭なし，円の内部は赤で塗りつぶされます．3)の場合と微妙に異なり，stroke-widthが省略されても輪郭の厚さは１になっていません．（場合分けを覚えるのは難しいので，全部指定すれば安全）
8)は<circle cx="5" cy="35" r="1.4" />のようにstroke,stroke-width, fillを省略した場合で，輪郭なしで，円の内部は黒で塗りつぶされます.

（まとめ）
stroke,stroke-width,fillを全部書くことにして，≪２つだけ覚える≫
ア）中抜き⇒ fill="none"
イ）中塗り⇒ fill="color"
正確には，ｒは輪郭線の中央までの距離（中を塗ってから輪郭を描くので，中は輪郭の半分だけ痩せる）

（その他）

9)のようにstroke-dasharrayを指定すると，輪郭を鎖線にできます．

【例題３】

　右のように赤青２つの円が交わる図を作ってください．

（答案例）
fill="none"とすれば，塗りつぶしのない部分は透明になります．

【例題４】

　右の例を参考にして，人物のイラストを描いてください．その際，次の点に注意してください．
(1) 方眼紙に設計図を書いてからパソコンに向かうとよいでしょう．暗算では無理です．
(2) 耳の丸の半分を隠すには，先に耳を描いてから，顔を後から描き，顔を塗りつぶす(fillをnoneにしない)とよい．
(3) 目の白黒の色分けなどは，先に外側を描いてから，後で中側を描くとよい．（逆では中が塗りつぶされて見えなくなる）
(4) #rrggbbの調合比をどうすれば肌色に近付くかという観点に関心を持つのもよいことです．
※なお，キティーちゃん，アンパンマン，ミッキーマウスなど真似したいキャラクターがあっても，それらは著作権や登録商標で保護されていますので，Webページの自分の作品として公開するものには使えません．自分のオリジナル作品を描いてください．

（参考答案）