Canvasに画像を複数枚重ねて描画するには

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++;               // 画像1枚読み込みにつきインクリメント
      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形式で取り出すことができます。
複数枚画像を重ねましたが、取得できるのは複数枚が1枚の画像としてまとまったものです。
画像の保存やSNSに投稿する際などに活用できそうです。

var dataURL = canvas.toDataURL(‘image/png’);

Canvasを使う意味

 Canvasに描画する場合、描画のプロセスがあるので少し時間がかかります。
画像をレイヤー状に重ねたいだけの場合は、ImageオブジェクトのStyleにZ-indexを指定することで実現したほうが表示は速いです。
重ねた後の画像を取得したり、画像に加工を加えたい場合にはCanvasが有効です。
 

Related Post

ドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポートドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポート

5月7日、弊社のドットDNPにてゴールデンウィークのスペシャルイベント「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」が開催されました。 株式会社ミツエーリンクスの木達一仁さんと、株式会社Gaji-Laboの山岸ひとみさんをお招きし、Webデザインにおけるアクセシビリティの取り組みと、サービスとしての読書体験についてそれぞれ講演いただきました。本記事では、その内容を抜粋してご紹介致します。 Webデザインにおけるアクセシビリティへの取組み 読書体験を考える ――サービスとしての読書体験 トークセッション セミナーを終えて Webデザインにおけるアクセシビリティへの取組み

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]

ParseはBaaS(Backend as a Service)と呼ばれる、アプリに共通して必要となるバックエンドの機能を提供するクラウドサービスのひとつです。BaaSを利用することで、データの同期やユーザ管理、プッシュ配信、ソーシャル連携など、アプリごとに独自の開発を行うことなく効率よく開発を進めることができます。  Parseでは、iOS、Android、JavaScript、.NET、OS Xと様々なプラットフォーム向けのSDKが提供されています。今回はこのParseのJavaScript SDKを使ってみます。 新規アプリケーションの作成

【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点

HTML5のAudio要素を使い、再生する音を遅延無く切り替える方法を、先週8/20(土)に開催された「第5回おばかアプリ選手権」で紹介しましたアプリ、iBooNを例に紹介したいと思います。 iBooNの仕組み iBooNは、Mobile Safari上で動作するWEBアプリです。Mobile Safariから加速度を取得(iOS4.2から加速度センサーに対応)し、前後のシェイクジェスチャ(ぶーんと走らせる動き)、左右の傾き(ドリフト)に応じて異なる車の音を再生させています。 当初は複数のAudioファイルをプリロードさせ、ユーザのアクションに応じて各ファイルを再生させる予定でしたが、Mobile Safariでは複数のAudioファイルをプリロードして保持しておくことが難しく、1音しかプリロードされた状態で鳴らなかったり(参照:iPhoneでHTML5のaudio要素を使うときに気をつけたいこと)、ユーザのアクションごとにAudioデータのロードでタイムラグが発生し、動きによって音が出ているという感じがありませんでした。  ポイント