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

ぐるぐる360°回転させる3つのjQuery Pluginぐるぐる360°回転させる3つのjQuery Plugin

商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも?なjQuery Pluginをご紹介します。これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。 SpriteSpin 最初にご紹介するのは3つの描画方法が用意されているプラグインSpriteSpinです。jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。(非minifyのspritespin.js:26.5KB) <!-- 画像を表示するHTML

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。

Sass/Compassを使ってCSSスプライトに挑戦してみました。Sass/Compassを使ってCSSスプライトに挑戦してみました。

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を1枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の1つとして利用されています。 Sass/Compassについて  Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。 次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。 CompassでCSSスプライト  CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。 続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の4行です。この4行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。  @charset “utf-8”; @import