HTML5のCanvasには画像を組み込むことができます。
Canvas上に複数枚の画像（透過PNG）をレイヤー状に順番に重ねたり、重ねた後の画像を取得する方法を解説します。
画像のプリロード
画像を複数枚重ねる場合、単に描画のループを回してしまうと読み込みが完了されたものから表示れ、
重ねる順番が保障されない為、描画の前に順にImageオブジェクトを先読みしておきます。
var fileArry = [‘imgName1’,’imgName2’…]; // 読み込みたい画像のパスの配列
var numMaterials = fileArry.length; // ①読み込みたい画像の数
var loadedCounter = 0; // ②ロード済Imageオブジェクト数のカウンタ
var imgObjArry = []; // ③ロード済Imageオブジェクト用配列
var canvas = document.getElementById(‘canvasElem’); // Canvas要素
var ctx = canvas.getContext(‘2d’); // 2dContext
function loadImges(){
var imgObj = new Image(); // 新しい Image オブジェクトを作る
imgObj.addEventListener(‘load’, // loadイベントのリッスン
function(){
loadedCounter++; // 画像１枚読み込みにつきインクリメント
imgObjArry.push(imgObj); // 読み込み済画像を③に格納
if(numMaterials == loadedCounter){ // ①の数 ＝ ②の数ならば描画する
display();
}else{
loadImges(); // すべて読み込まれていなければ次を読込
}
},false);
imgObj.src = fileArry[imgObjArry.length]; // ソースのパスを設定
}
Canvasに描画してみる
画像の読み込みが完了してから、すべての画像を順番にCanvasに描画します。
参照が残っているとガベージコレクトされないため、明示的にImageオブジェクトを解放しています。
function display(){
for (var i in imgObjArry){
ctx.drawImage(imgObjArry[i], 0, 0);
imgObjArry[i] = null;
}
}
Canvasに再描画してみる
例えば、一部のレイヤーだけ画像を差し替えたい場合。
Canvasに描画済の各画像は取り出せないので、保持しているimgObjを差し替えたりした後にCanvasの中身をクリアし、再描画します。
ctx.clearRect(0,0,canvas.width, canvas.height); // Canvasのクリア
display();
画像を取得する
toDataURL()メソッドにより、一度描画したものをbase64形式で取り出すことができます。
複数枚画像を重ねましたが、取得できるのは複数枚が１枚の画像としてまとまったものです。
画像の保存やSNSに投稿する際などに活用できそうです。
var dataURL = canvas.toDataURL(‘image/png’);
Canvasを使う意味
Canvasに描画する場合、描画のプロセスがあるので少し時間がかかります。
画像をレイヤー状に重ねたいだけの場合は、ImageオブジェクトのStyleにZ-indexを指定することで実現したほうが表示は速いです。
重ねた後の画像を取得したり、画像に加工を加えたい場合にはCanvasが有効です。