canvasとは？

canvasとは、HTML5に標準装備されている図形を描くための技術仕様で、 HTMLの<canvas>要素とJavaScriptを組み合わせて図形を描画することができます。

公式ドキュメントはこちら。=>https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas

ざっくりというと、canvasを使うことで、画像の描画やアニメーション、ゲームのグラフィック、データの可視化、写真加工などを簡単に描画することができます。

canvasは基本的には2Dでの画像表示を対象としています。

使い方

まずはcanvasをbodyタグに組み込む必要があります。

<canvas id="canvas" width="640" height="480" style="background-color: black;"></canvas>

そして上記で指定したidを使って、<script>内に組み込みます。


<script>
  const canvas = document.getElementById("canvas")
  const ctx = canvas.getContext("2d")
  const img = new Image()
  img.src = "画像のURL"
  img.onload = () => ctx.drawImage(img, 0, 0, 100, 100)
</script>

順番に解説します。

まず、今回canvasのidはcanvasで指定しました。
なので、document.getElementByIdを使ってcanvasというidの部分にJavaScriptを結びつける必要があります。

そして次のconst ctx = canvas.getContext("2d")はcanvasを2dの画像描画に適用させるということです。ここでctxと変数に格納したので、それ以降はctx.hogehogeという形でcanvasの機能を使うことができます。
canvasという設計図の中に入っているhogehogeという機能にアクセスをすることができるわけです。

canvasでは画像を描画する際にはdrawImage(描画させる画像, x軸, y軸, 横幅, 縦幅)で表すことができるので、ここではctx.drawImage(img, 0, 0, 100, 100)と書くことで、横幅100、縦幅100のimgという画像を(0,0)の位置に表示することができます。

実際にスライムを表示させてみる

実際にスライムを表示させてみましょう。

スライムの画像は以下のURLから用います。
https://cache-www.dragonquest.jp/hoshidora/assets_190310/narikirislime/pc/slime.png

まずは基本となるHTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

body内にcanvas部分を記載

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" width="640" height="480" style="background-color: black;"></canvas>
  <script>
    const canvas = document.getElementById("canvas")
    const ctx = canvas.getContext("2d")
    const img = new Image()
    img.src = "https://cache-www.dragonquest.jp/hoshidora/assets_190310/narikirislime/pc/slime.png"
    img.onload = () => ctx.drawImage(img, 0, 0, 100, 100)
  </script>
</body>
</html>

これで無事スライムが表示されたかと思います！

もしもっと学びたいという方はぜひJavaScript道場にご参加ください。
次回はこれを使ってスライムを動かしていきます。

ゲームを作りながら学ぶ！JavaScript レベルアップ講座 part4

canvasとは？

使い方

実際にスライムを表示させてみる