どうも！LSSです！！
JavaScriptの本を眺めていると、昔に自分がJavaScriptをいじっていた頃には無かった、「canvas」という要素がある事を知りました。
※HTML5から実装されたものらしいです。
名前の通りWebページ内にキャンバスに見立てた枠を用意して、そこにJavaScriptから線を引いたり色々できる、というなんだか面白そうな要素なので、今回はそれを試してみたいと思います^^
早速、作ってみたものがこれ！
ラインアートについて
このブログに以前、このような事を書きました。
そんな中、「夏休み 小学生向けのプログラミング体験学習」に一度だけ参加させてもらった記憶があります。 BASIC言語を用いて、ラインアートなんかをやったような気がします。 ラインアートっていうのは、FOR文とLINEコマンドを組み合わせて実行すると、思いもよらない図形が描かれる、というもので、小学生の心をプログラミングに惹きつけるには必要十分なものでしたね。
LSSのプログラミング歴 - Little Strange Software
その、以前の記事に書いた「小学生の頃にやってみたラインアートなるもの」は、こういう感じのモノになります^^
文章では伝えにくい、でも一目見ると納得するようなものなので、いつか皆さんのお目にかけたかった、というのが今回ようやく叶いましたｗ
コードと説明
コード
<canvas id="cv0" width="300" height="300">Canvas非対応ブラウザです</canvas>
<script>
ctx=cv0.getContext("2d");
for(i=5;i<=295;i+=5){
ctx.moveTo(5,i);
ctx.lineTo(i,295);
}
ctx.stroke();
</script>
以上です。（このコードをそのまま、はてなブログの「HTML編集」にコピペすると、プレビューで同じように表示されますよ）
いかがでしょうか？
複雑な図形のように見えて、その割には単純なコードだと思います。
以下、解説~
<canvas id="cv0" width="300" height="300">Canvas非対応ブラウザです</canvas>
１行目に書いているこれが、「canvas」を用意するHTMLタグです。
中に書いている「Canvas非対応ブラウザです」という文章は、見ている人のブラウザがcanvasに対応していない場合のみ表示される文章です。
※この記事の最初の「早速、作ってみたものがこれ！」のところに、この文章が出た方おられますか？
今回はキャンバスに「cv0」というidをつけて（任意の名前。好きに変えてOK）、幅と高さを300に設定しています。
ctx=cv0.getContext("2d");
cv0というidを持つキャンバスを、ctxという変数で扱います、という意味になります。
このctxというのも任意の名前です。
for(i=5;i<=295;i+=5){
変数 i を使ってループを回します。
iの初期値は5、そこから5づつ増やしながら、iが295になるまで、{ }内の処理を繰り返します。
ctx.moveTo(5,i);
これから描くモノの開始地点を、キャンバス内の座標(5,i)に設定します。
iは5~295まで変化するので、ループ一周めは(5,5)、次に(5,10)、次に(5,15)…と後の方の数字（Y座標、縦の位置）が増えていき、最終的に(5,295)になります。
ctx.lineTo(i,295);
先に設定した開始地点から、キャンバス内の座標(i,295)まで線を引きます。
先ほどの開始地点の話とあわせると、ループ一周目は(5,5)から(5,295)まで線を引き、二周めには(5,10)から(10,295)まで線を引き、…という感じに、前の方の数字（X座標、横の位置）が増えていき、最終的に(5,295)から(295,295)まで線を引く事になります。
ctx.stroke();
っと、lineToは「線を引く」と書きましたが、実際には「パスを作成する」いわば「描く準備」をするもので、実際に「作成したパスをキャンバスに描画する」のがこのstroke()です。
今回のコードは「ループ文でたくさんの線を引く用意をしておき、ループ終了後にそれを一気にstroke()で描きだす」というモノですね。
描いているのは直線だけなのに、曲線が見える不思議
…というのが、ラインアートの面白いところ^^
今回の例はごく単純なものでしたが、手をくわえはじめるともっと面白い図形が誕生しそうですね！
余談なんですが、「ラインアート」でGoogle検索をかけると、なんか眼鏡ばかり出てきますｗｗｗ
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
