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

Webフォントを使用したスマートフォン向け秀英体見本帳を公開Webフォントを使用したスマートフォン向け秀英体見本帳を公開

秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の6 書体を試験的にWebフォント化し、HTML版を作成しました。推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。 Flash版はこちら>Flash見本帳HTML版はこちら>スマートフォン向け秀英体見本帳(※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。)  チャレンジしたこと Webフォントでの縦書き表現 CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題(参照:縦書きにWebフォントを使いたい!けど使えるのか検証してみた)がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。

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データのロードでタイムラグが発生し、動きによって音が出ているという感じがありませんでした。  ポイント