備忘録

備忘録

Canvasで画像を重ね合わせる方法

HTML JavaScript

Ⅰ. はじめに

タイトルの通り「Canvasで画像を重ね合わせる方法」です。

Ⅱ. サンプルプログラム

index.html

<!DOCTYPE html>
<html>
  <body>
    <canvas id="my-canvas" width=300 height=300></canvas>
    <script src="index.js"></script>
  </body>
</html>

index.js

// 優先度が低い順に画像パスを指定する。（上に表示したい画像は後ろに指定する）
const imgs = ['img/character.png', 'img/frame.png', 'img/rarity.png'];
const context = document.getElementById('my-canvas').getContext('2d');

const loadImage = url => {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.src = url;
  });
};

Promise.all(imgs.map(loadImage)).then(imgs => {
  imgs.forEach(img => {
    context.drawImage(img, 0, 0, 300, 300);
  });
});

画像

character.png	frame.png	rarity.png

実行結果

f:id:kagasu:20180428113058p:plain