Tableを使ったドット絵ジェネレーターを作成してみる

2021-05-26

概要

簡単にドット絵ができないかなぁと考えていたら、tableタグでできるんじゃね?っていうことに気づきました。

今回はHTMLとJavaScriptでお手軽ドットジェネレーターを作成してみたいと思います。

仕上がり

以下のような挙動を目指します。

ドットテーブルとカラーテーブルを用意し、選んだカラーをドットに反映します。
できた絵柄は下の作成でcanvasにて描画させます。

コード+解説

HTML

tailwindcssのCDNを使用していますが、他は特に変わりないマークアップです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <title>dot-image-generator</title>
  <style>
    table {
      border: 1px solid;
      border-collapse: collapse;
    }

    table th,
    table td {
      border: 1px solid;
      padding: 1rem;
    }

    #colorTable {
      border: none;
    }

    #colorTable td {
      border: none;
      transition: transform 200ms;
    }

    #colorTable td.is-active {
      transform: scale(1.15);
    }
  </style>
</head>
<body>
<div class="min-h-screen flex flex-col justify-center items-center p-8">
  <table id="dotTable"></table>
  <div class="mt-4">
    <table id="colorTable"><tr></tr></table>
  </div>
  <div class="mt-8 flex justify-center w-full">
    <button type="button" id="clearBtn" class="border border-black py-1 px-2">
      クリア
    </button>
    <button type="button" id="createCanvasBtn" class="ml-8 border border-black py-1 px-2">
      作成
    </button>
    <canvas id="canvas" class="ml-2 border" width="20" height="20"></canvas>
  </div>
</div>

<script src="./main.js"></script>
</body>
</html>

JavaScript

メインのコードです。
とはいえ、そこまで難しいことはしていません。

const x = 20
const y = 20

let currentColorCell = null
let selectedColor = null
const colors = ['black', 'gray', 'white', 'red', 'orange', 'yellow', 'lime', 'cyan', 'blue', 'magenta']
const dotTable = document.getElementById('dotTable')
const colorTable = document.getElementById('colorTable')
const clearBtn = document.getElementById('clearBtn')
const createCanvasBtn = document.getElementById('createCanvasBtn')
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

// *1
function createDotTable() {
  for (let i = 0; i < x; i++) {
    const row = dotTable.insertRow(-1)

    for (let j = 0; j < y; j++) {
      const cell = row.insertCell(-1)
      cell.onclick = function() {
        this.style.backgroundColor = selectedColor
      }
    }
  }
}

// *2
function createColorTable() {
  for (let i = 0; i < colors.length; i++) {
    const cell = colorTable.rows[0].insertCell(-1)
    cell.style.backgroundColor = colors[i]

    cell.onclick = function() {
      if (currentColorCell) currentColorCell.classList.remove('is-active')
      selectedColor = this.style.backgroundColor
      this.classList.add('is-active')
      currentColorCell = this
    }
  }
}

// *3
function createCanvas() {
  for (let i = 0; i < x; i++) {
    for (let j = 0; j < y; j++) {
      ctx.fillStyle = dotTable.rows[i].cells[j].style.backgroundColor
      ctx.fillRect ( j, i, 1, 1 )
    }
  }
}

// *4
function clearTableCell() {
  for (let i = 0; i < x; i++) {
    for (let j = 0; j < y; j++) {
      dotTable.rows[i].cells[j].style.backgroundColor = 'white'

      ctx.fillStyle = 'white'
      ctx.fillRect(0, 0, 20, 20)
    }
  }
}

createCanvasBtn.addEventListener('click', createCanvas)
clearBtn.addEventListener('click', clearTableCell)

createColorTable()
createDotTable()
clearTableCell()

*1 では、ドットを作るテーブルを作成しています。

*2 では、色を選択するテーブルを作成しています。テーブルセルtd要素に対して、クリックするとis-activeを付与するようにします。

*3 では、作成したドット絵をcanvasに描写します。
注意すべきは、canvasは20x20の大きさであることです。
fillStyleで得た色をfillRect1x1の大きさで描画する必要があります。

*4ではクリア処理をしています。
ここではドットテーブルとキャンバスを白で塗りつぶす必要があります。

感想

JavaScriptを利用して簡単なアプリを作成するのはとても楽しいです。
HTMLで再現しづらいこともJavaScriptなら簡単にできます。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店