こんにちは、Yuiです。
今回はcanvasを使って背景やモンスターを描画する方法について書いていきます。
JavaScript道場はこちら。
今回の目標物はこれです。
#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道場にご参加ください。
次回はこれを使ってスライムを動かしていきます。