JavaScript

【canvas】ランダムにドット絵を作るアプリ【JavaScript】

HTMLのcanvasタグをご存知でしょうか。

今までwebサイト上に図形を表示するには、PNG・JPEG・GIFなどの画像として表示することが一般的でした。

 

HTML5では、2Dのグラフィックスを描くcanvasタグで図形をすばやく表示できるようになりました。

標準のHTMLとJavaScriptだけで使えるのでとても便利です。

 

今回はcanvasを使って「ランダムなドット絵を作るアプリ」を作ったのでご紹介します。

完成版は下のリンクからどうぞ。

ランダムにドット絵を作るアプリ

 

この記事では、canvasの基本的な使い方と作ったアプリのコードをご紹介します。

 

目次
  1. canvasで図形を描く準備
  2. 四角形を描く
  3. アプリのしくみ
  4. まとめ

canvasで図形を描く準備

HTMLとJavaScriptを準備します。

HTML

<canvas id="canvas1" width="300" height="300"></canvas>

 

canvasタグに、idとwidthとheightを指定します。

idは、のちほどJavaScriptのメソッドを実行するために必要です。

widthとheightは、キャンバスのサイズを幅と高さで指定します。

 

JavaScript

// キャンバスを使うための準備
var canvas = document.getElementById('canvas1'); // canvasのオブジェクトを取得
var context = canvas.getContext('2d'); // canvasのコンテキストを取得

 

これでcanvasで図形を描画する準備ができました。

 

 

四角形を描く

作ったキャンバスに四角形を描画してみましょう。

一連の処理を関数にまとめます。

function fill() {
    context.fillStyle = 'red';
    context.fillRect(20,40,50,100);
}

1行目は、塗りつぶしの色を指定します。この場合は赤です。

2行目は、左から20,上から40の位置に、幅50,高さ100の四角形を描く命令です。

結果は下のようになります。


図形を表示するには、canvasタグをサポートしたブラウザが必要です。

図形の描画位置は、座標で指定する。

 

webページの読み込みが完了したら描画する

上で作った描画関数を実行してみましょう。

webページの読み込みが完了したら実行させます。

window.addEventListener('load', (event) => {
    fill();
});

 

これで、canvasによる図形の描画ができました。

 

つぎに、「ランダムにドット絵を作るアプリ」のしくみをご紹介します。

 

アプリのしくみ

canvasによる図形の描画位置は座標で指定することが基本です。

このしくみを使って、ランダムな数値を取得して座標にすることでランダムなドット絵を作ります。

塗りつぶしの色もランダムにします。

 

塗りつぶしの処理

// 塗りつぶし処理
function fill() {
    var colors = ["red", "yellow", "green", "blue", "pink", "brown", "black", "orange"];
    var array = [0, 100, 200, 300, 400];
    var x = (array[Math.floor(Math.random() * array.length)]);
    var y = (array[Math.floor(Math.random() * array.length)]);
    context.fillStyle = colors[Math.floor(Math.random() * colors.length)];
    context.fillRect(x, y, 100, 100);
}

塗りつぶしの色と座標をいくつか用意しておきます。

Math.random()で乱数を取得、座標と色を決定します。

あとは、fillRect()で塗りつぶしを行います。

 

 

画像のダウンロード

作ったcanvasの図形は、PNG画像として保存することができます。

ダウンロードリンクをクリックするとダウンロードできるしくみを作りました。

// 画像のダウンロード処理
document.getElementById('download-link').addEventListener('click', (e) => {
    const a = e.target;
    a.href = canvas.toDataURL(); // Canvasからdata:URLを取得
    a.download = new Date().getTime() + '.png'; // ファイル名はタイムスタンプに設定
});

 

 

まとめ

ご覧いただきありがとうございました。

まとめです。

 

canvasタグは、webページに図形を表示できるタグです。

今回は、乱数を作りcanvasの座標と図形の色をランダムに選ぶことで、ランダムなドット絵を作るアプリを作りました。

 

みなさんも応用して面白いものを作ってみてください。

関連記事