HTML5のCanvasで遊んでみた！ランダム四角表示！

HTML5 ロゴ

ふとHTML5にあるCanvasを思い出し、初めて遊んでみました。

思ったより簡単で楽しかった！

作ったもの
ソース(下準備)
ソース(javascript)
ポイント
あとがき

作ったもの

こんなものを作ってみました。

四角形がランダムに表示されます。

ソース(下準備)

まずHTMLがこちら。

大事なのはjavascriptの読み込み設定と、canvasの宣言くらいです。
cssは範囲の区分けとダークにするためのものです(笑)

<html>
<head>
  <title>canvas test</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>

CSSです。前述通りいらないトコロを黒くするだけ。

body {
  background: black;
}
canvas {
  background: white;
}

ソース(javascript)

こっからがポイントですね。

/* 描画関数 */
function draw() {
  /* Canvas要素の定義など */
  var cs  = document.getElementById('myCanvas');
  var ctx = cs.getContext('2d');
  var w = cs.width;
  var h = cs.height;
  var x = 0;
  /* 設定値のMin-Max */
  var minSize = 20;
  var maxSize = 50;
  var minW = minSize;
  var minH = minSize;
  var minPos = 0;
  var maxPos = h - minSize
  var cnt = 0;    // カウンタ

  // min から max までの乱整数を返す関数
  // Math.round() を用いると、非一様分布になります!
  function getRandomInt(min, max) {
    return Math.floor( Math.random() * (max - min + 1) ) + min;
  }

  // 位置の取得
  function getPos() {
    return getRandomInt(minPos, maxPos);
  }

  // サイズの取得
  function getSize() {
    return getRandomInt(minSize, maxSize);
  }
  
  // カウンタ表示
  function dbgCounter(ctx) {
    function inc(c) {
      return ((c + 1) < 256) ? (c + 1) : 0;
    }
    var txt = "cnt: " + cnt;
    ctx.fillText(txt, w - 50, h - 10);
    cnt = inc(cnt);
  }

  /* 描画フロー */
  function render() {
    // Canvas全体をクリア
    ctx.clearRect(0, 0, w, h);

    // 四角を描画
    for (var ii = 0; ii < 5; ii++)
    {
      var size = getSize();
      ctx.strokeRect(getPos(), getPos(), size, size);
    }
    
    // カウンタ表示
    dbgCounter(ctx);
  }

  /* render()関数を繰り返す */
  setInterval(render, 100);
}

// 起動時実行処理
window.onload = function(){
  draw();
}

ポイント

ポイントを解説していきます。

起動時に実行させる

window.onloadに関数を代入すると、ページが開かれたとき、ここの処理が行われます。

// 起動時実行処理
window.onload = function(){
  draw();
}

この場合、draw関数がコールされます。

定周期で関数を実行する

setIntervalを使うことで、設定した関数を定周期で実行することができます。

/* render()関数を繰り返す */
setInterval(render, 100);

この場合、render関数を、100ms周期で実行することができます。

これでバチバチ表示できます！

描画するところ

実際に描画するところです。

// 位置の取得
function getPos() {
  return getRandomInt(minPos, maxPos);
}

// サイズの取得
function getSize() {
  return getRandomInt(minSize, maxSize);
}

// カウンタ表示
function dbgCounter(ctx) {
  function inc(c) {
    return ((c + 1) < 256) ? (c + 1) : 0;
  }
  var txt = "cnt: " + cnt;
  ctx.fillText(txt, w - 50, h - 10);
  cnt = inc(cnt);
}

/* 描画フロー */
function render() {
// Canvas全体をクリア
ctx.clearRect(0, 0, w, h);

// 四角を描画
for (var ii = 0; ii < 5; ii++)
{
  var size = getSize();
  ctx.strokeRect(getPos(), getPos(), size, size);
}

// カウンタ表示
dbgCounter(ctx);
}

getPos, getSizeは、範囲を指定してランダム値を生成する為のヤツです。

ctx.clearRectは、指定範囲内の描画済みのモノを消すものです。

ctx.strokeRectは、塗潰しなしの四角形を描画します。
コレを1回でランダムに5個表示しています。

ctx.fillTextは、文字列を表示します。
あまり意味はありませんが、テストがてら。

乱数はこちらのモノを使わせて頂きました。

developer.mozilla.org

あとがき

今回お試し的な感じで作ってみました。

かなり簡単にできたのがいいですね。

javascriptは結構分かりやすいですし！

lisz-works

プログラミングと興味を貴方に