トップ＞ JavaScript ＞ Canvasに画像を貼り付ける

Canvasに画像を貼り付ける

Canvasの使い方

ページ構成を下に示す。

<!DOCTYPE html>
<html>
<head>
    // 省略
</head>
<body>

<canvas id="myCanvas" width="480" height="240"></canvas>

<script>
    // JavaScriptのコードがここに入る
</script>

</body>
</html>

Canvasに画像を貼り付ける

<canvas id="map" width="256" height="256"></canvas>

<script>
  // canvas準備
  const map = document.getElementById("map"); 
  const ctx = map.getContext("2d");

  // 画像読み込み
  const img = new Image();
  img.src = "http://cyberjapandata.gsi.go.jp/xyz/std/14/14552/6451.png";  // 画像のURLを指定
  img.onload = () => { ctx.drawImage(img, 0, 0); };
</script>

Canvasに画像を二つ貼り付ける

<div align="center">
<canvas id="map2" width="512" height="256"></canvas>
</div>

<script>
  // canvas準備
  const map2 = document.getElementById("map2"); 
  const ctx2 = map2.getContext("2d");

  // 画像読み込み
  const img1 = new Image();
  img1.src = "http://cyberjapandata.gsi.go.jp/xyz/std/14/14552/6451.png";  // 画像のURLを指定
  img1.onload = () => { ctx2.drawImage(img1, 0, 0); };

  const img2 = new Image();
  img2.src = "http://cyberjapandata.gsi.go.jp/xyz/std/14/14553/6451.png";  // 画像のURLを指定
  img2.onload = () => { ctx2.drawImage(img2, 256, 0); };
</script>

Ａ．リファレンス

[1] [HTML5] Canvasに画像を貼り付ける