JavaScriptで絵画してみた。

Posted by : Izumikawa Fukumi 2013年11月17日日曜日

今回一度はやってみたかったプログラミング言語だけで絵を描くと言う事をやってみたのですが、結構大変でしたので、断念しました。ですがこの経験でJavaScriptの描画方法が分かったのでご紹介したいと思います。是非お時間がある方は試してみて下さい。

予想以上に簡単ですので試してみて下さい。

ではまずソースをご覧ください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script>
            window.addEventListener("load", function ()
            {
                var myContext = document.getElementsByTagName("canvas")[0];
                var context = myContext.getContext("2d");
                if (!context) { return; }
 
                context.beginPath();
 
                context.moveTo(50, 50);
                context.lineTo(80, 20);
                context.lineTo(80, 50);
 
                context.strokeStyle = "red";
                context.lineWidth = "2";
                context.stroke();
            }, false);
        </script>
        <canvas id="context" height="1000" width="800">
            Canvas対応ブラウザを使用してください。
        </canvas>
    </body>
</html>

まだ説明していないので何が何だか分かりませんよね?
ですがこれは一番シンプルな描画ですので直ぐに覚えられます。

「var myContext = document.getElementsByTagName("canvas")[0];」では描画する場所を取得しています。HTMLの部分で、「<canvas id="context" height="1000" width="800">」と言う部分がありますよね?　このタグの中に描画すると考えて下さい。描画する場所の幅や高さはcanvasタグの「height="1000" width="800"」で設定します。

では、どの様にして直線を描くのか?
と言う疑問が浮かび上がると思いますが簡単です。

座標を指定すればその座標から描画してくれます。

でも座標って難しそうな感じしますよね?　でも以外に簡単ですよ!　私はWindows付属のペイントを使って座標を調べています。今回やろうとしたJavaScriptでのお絵かきではペイントを使って座標を調べました。　初めては感覚で座標を指定していました。ですがそれだと何回か調整が必要で時間が掛かるのでペイントツールの力を借りる事にしました。

画像上の赤い線が私がJavaScriptだけで描いた部分です。
ブラウザーの下にある部分がペイントで座標を調べています。
画像のソースを見ても分かると思いますが、いたってシンプルな描画方法です。

描画の部分のソースは、

                context.moveTo(50, 50);
                context.lineTo(80, 20);
                context.lineTo(80, 50);
 
                context.strokeStyle = "red";
                context.lineWidth = "2";
                context.stroke();

絵画の始まりとなる部分は「context.moveTo(50, 50);」です。　あとは、全て「context.lineTo(80, 20);」で大丈夫です。　何が違うの??　と感じる方も居ると思いますが、メソッドが違います。「moveTo・lineTo」が違います。　何故始まりのメソッドとかが違うのかと言うと、これは「moveTo」だけ書いても絵画されません。始まりからどこへ向けて伸びるのかを指定する必要があります。

私達人間は気づかないうちに何かを描く時は「ここからここまで描く」と言う処理を頭で行っているのです。プログラムは純粋な物なので「ここから〜ここまで伸ばす」と言うのを教えてあげないとダメなのです。

「moveTo・lineTo」の引数である座標の定義方法は、

                context.moveTo(x, y);
                context.lineTo(x, y);

となります。
XとYが分からない方に説明します。

Xはブラウザーの上(top)の事です。
Yはブラウザーの左(left)の事です。

xは上からの距離(px単位)
yは左からの距離(px単位)

                context.moveTo(3, 3);
                context.lineTo(8, 14);
                context.lineTo(13, 3);

にすると「V」が表示されます。

                context.moveTo(3, 3);
                context.lineTo(6, 14);
                context.lineTo(10, 4);
                context.lineTo(13, 14);
                context.lineTo(16, 3);

にすると「W」が表示されます。

これで線の描き方は分かったと思います。
では描画のオプションみたいな物の説明します。

                context.strokeStyle = "red";
                context.lineWidth = "2";
                context.stroke();

線の色を変更するには「strokeStyle = "red";」で変更出来ます。「red」は赤色です。
線の太さを変更するには「context.lineWidth = "2";」で太さを設定出来ます。
「context.stroke();」は描画するよ!!　って事だと思ってください。

これで貴方も自由に描画出来ます。
描画はゲーム作りにも役立ちますので覚えて損は無いと思います。

I aim to creator.

JavaScriptで絵画してみた。

Popular Posts

GoogleProfile