【リアイム】

タップ（クリック）で消す



よみこみ中…








閉じる
もくじ

リアイム

アウトプット&知識の共有

トップ > プログラミング > canvasの使い方 基本的なコードからマップを表示する例をご紹介！ JavaScript

canvasの使い方 基本的なコードからマップを表示する例をご紹介！ JavaScript

プログラミング リアイム


f:id:a1t2s2u2:20211212203558p:plain

canvasで何ができるか

f:id:a1t2s2u2:20211208232555j:plain

ゲームなどを作成するには画面があったほうがいいですよね。

プログラミングを行なっている方ならわかっていただけると思いますが、コンソールやターミナルで実行したゲームはなんだか物足りないですよね。

画像を表示させて実行することでより楽しいものを開発することができます。




使い方

f:id:a1t2s2u2:20211212134725j:plain

canvasを使うにはサイトの言語（html, JavaScript, css）を理解している必要があります。
とはいっても、その知識はあまり深くなくて大丈夫です。

基本的なcanvasのためのhtmlとJavaScript

まずは雰囲気を味わう？ために基本構造を見てみます。

<html>

    <title>Canvasの使い方</title>

    <body>
        <canvas id='canvas'></canvas>
    </body>

    <script>
        const canvas = document.getElementById('canvas');
        canvas.width = 10000;
        canvas.height = 10000;
        const ctx = canvas.getContext('2d');
    </script>

</html>

スクリプトの解説としては、

const canvas = document.getElementById('canvas');
canvas.width = 10000;
canvas.height = 10000;

この部分で<canvas>を取得し、その内容の横幅（width）と縦幅（height）を設定します。


ここで注意していただきたいのが、これらのサイズはvlt;canvas>のスタイルではないという点です。つまり、表示される<canvas>の大きさとは別だということですね。

const ctx = canvas.getContext('2d');

canvas.getContext('2d')では、グラフィックを描画するためのオブジェクトを返します。これ（ctx）を用いてcanvasに色を塗ったり、画像を貼ったりします。



マップをcanvasで表示する

※ あくまでも例の提示であるため、拡張性は低いかもしれません。


内容

「マップ内を表示する」
これを目的として開発を行います。

本当はキャラクターを動かすところまで説明しようかなと思いましたが、やはり「面倒だな」と思ってしまいました。
まずはマップの描画をご説明します。
キャラクターを動かすのは位置情報を変更してマップを再描画するだけなので結構簡単です。

使用画像

使用する画像は次のものとします。

・キャラクター
f:id:a1t2s2u2:20211212184928p:plain



・マップ用

f:id:a1t2s2u2:20211212185208j:plain
f:id:a1t2s2u2:20211212185217j:plain
f:id:a1t2s2u2:20211212185224j:plain
f:id:a1t2s2u2:20211212185230j:plain





画像の読み込み

画像が読み込まれた後に描画しなければうまく画像が表示されません。そのため、まずは画像を読み込ませるために<img>を使用します。
実際に表示させたくはないのでstyle="display: none;"を以下のように設定しましょう。

<img style="display: none;" src="画像のパス">


では画像をcanvasに描画してみましょう。
画像の読み込みをするまでのhtmlコードは以下の通りです。

<html>

    <title>Canvasの使い方</title>

    <body>
        <!-- キャラクター -->
        <img style="display: none;" src="boy.png">
        <!-- 平原 -->
        <img style="display: none;" src="平原.jpg">
        <!-- 草あり -->
        <img style="display: none;" src="草あり.jpg">
        <!-- 砂 -->
        <img style="display: none;" src="砂.jpg">
        <!-- 水 -->
        <img style="display: none;" src="水.jpg">
       <canvas id='canvas' style="border: 1px solid black;width: 400px;height: 400px;"></canvas>
    </body>

    <script>
        const canvas = document.getElementById('canvas');
        canvas.width = 10000;
        canvas.height = 10000;
        const ctx = canvas.getContext('2d');

        let キャラクター = new Image();キャラクター.src = "boy.jpg";
        let 平原 = new Image();平原.src = "平原.jpg";
        let 草あり = new Image();草あり.src = "https://cdn-ak.f.st-hatena.com/images/fotolife/a/a1t2s2u2/20211212/20211212185217.jpg";
        let 砂 = new Image();砂.src = src="砂.jpg";
        let 水 = new Image();水.src = "水.jpg";

    </script>

</html>

canvasにボーダーをつけ、大きさも設定しました。

※ わかりやすいように変数名を日本語にしています。


これを実行すると以下のように表示されます。
f:id:a1t2s2u2:20211212191153p:plain


画像の描画

ではキャラクターやマップの画像を描画していきましょう。

描画をするには次のようなコードを記述します。

ctx.drawImage(img, x1, y1, width, height);

これは「img（画像を代入したもの）をcanvas上の点（x1, y1）を左上にして大きさ（width, height）の画像を描画する」というものです。

マップの情報については次のように定義します。

let map_number = [平原, 草あり, 砂, 水];

const map = [
    [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
    [0,0,0,1,1,2,2,2,1,1,0,0,0,0,0],
    [0,0,0,1,2,2,2,2,2,1,0,0,0,0,0],
    [0,0,1,2,2,3,3,2,2,1,0,0,1,1,0],
    [0,1,1,2,3,3,3,3,2,0,1,1,1,0,0],
    [0,1,1,2,3,3,3,3,2,2,1,0,1,0,0],
    [0,1,2,3,3,3,3,3,2,0,0,0,0,0,0],
    [0,0,1,2,2,2,2,1,2,0,0,0,0,0,0],
    [0,0,1,1,1,2,2,2,1,0,0,0,0,0,0],
    [0,1,1,1,1,1,2,1,1,0,0,0,0,0,0],
    [1,1,1,1,1,1,1,1,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,3,3,3,0,0],
    [0,0,0,0,0,0,0,0,0,0,3,2,3,0,0],
    [0,0,0,0,0,0,0,0,0,0,3,3,3,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
];

// マップに描画する縦,横の画像数
var cell_number = 10;
// １つの画像サイズを計算してみる
var cell_size = canvas.height / cell_number;

マップ情報の数字はmap_number変数と対応しています。



全体のコード


そして描画処理を実装したhtml全体のコードは次のようになります。

<html>

    <title>Canvasの使い方</title>

    <body>
        <!-- キャラクター -->
        <img style="display: none;" src="boy.png">
        <!-- 平原 -->
        <img style="display: none;" src="平原.jpg">
        <!-- 草あり -->
        <img style="display: none;" src="草あり.jpg">
        <!-- 砂 -->
        <img style="display: none;" src="砂.jpg">
        <!-- 水 -->
        <img style="display: none;" src="水.jpg">
        <canvas id='canvas' style="border: 1px solid black;width: 400px;height: 400px;"></canvas>
    </body>

    <script>
        window.onload = () => {
            const canvas = document.getElementById('canvas');
            canvas.width = 10000;
            canvas.height = 10000;
            const ctx = canvas.getContext('2d');

            let キャラクター = new Image();キャラクター.src = "boy.png";
            let 平原 = new Image();平原.src = "平原.jpg";
            let 草あり = new Image();草あり.src = "草あり.jpg";
            let 砂 = new Image();砂.src = "砂.jpg";
            let 水 = new Image();水.src = "水.jpg";

            let map_number = [平原, 草あり, 砂, 水];

            const map = [
                [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0],
                [0,0,0,1,1,2,2,2,1,1,0,0,0,0,0],
                [0,0,0,1,2,2,2,2,2,1,0,0,0,0,0],
                [0,0,1,2,2,3,3,2,2,1,0,0,1,1,0],
                [0,1,1,2,3,3,3,3,2,0,1,1,1,0,0],
                [0,1,1,2,3,3,3,3,2,2,1,0,1,0,0],
                [0,1,2,3,3,3,3,3,2,0,0,0,0,0,0],
                [0,0,1,2,2,2,2,1,2,0,0,0,0,0,0],
                [0,0,1,1,1,2,2,2,1,0,0,0,0,0,0],
                [0,1,1,1,1,1,2,1,1,0,0,0,0,0,0],
                [1,1,1,1,1,1,1,1,0,0,0,0,0,0,0],
                [0,0,0,0,0,0,0,0,0,0,3,3,3,0,0],
                [0,0,0,0,0,0,0,0,0,0,3,2,3,0,0],
                [0,0,0,0,0,0,0,0,0,0,3,3,3,0,0],
                [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
            ];

            // マップに描画する縦,横の画像数
            var cell_number = 15;
            // １つの画像サイズを計算してみる
            var cell_size = canvas.height / cell_number;
            // マップを表示する
            map.forEach((列, a) => {
                console.log(列);
                列.forEach((番号, b) => {
                    // 画像の描画
                    ctx.drawImage( map_number[番号], cell_size * b, cell_size * a, cell_size, cell_size);
                });
            });
        }

    </script>

</html>

これを実行すると、次のようになります。

f:id:a1t2s2u2:20211212201946p:plain

ちなみにキャラクターを描画するには次のようなコードを記述すれば可能です。（座標は4, 7）

// キャラクターの描画
ctx.drawImage( キャラクター, cell_size * 4, cell_size * 7, cell_size, cell_size);

そして結果はこちら

f:id:a1t2s2u2:20211212202142p:plain






記事を読んでいただきありがとうございます。

今回の記事はけっこうてきとうに作ってしまいました笑 ただ、「canvasを使うとどのようなことができるか」や「マップを描画する雰囲気」を伝えられたなら嬉しいです。



おすすめ記事

riaimu.hateblo.jp
riaimu.hateblo.jp
riaimu.hateblo.jp






記事の内容に間違いがあった場合は、Twitterもしくはお問い合わせフォームからお伝えください。