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デザインにおけるアクセシビリティへの取組み

縦書きにWebフォントを使いたい!けど使えるのか検証してみた縦書きにWebフォントを使いたい!けど使えるのか検証してみた

最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari(5.1.2)とMac版Safari(5.1.1)です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’;      src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle {      font-family:’DNPShueiMinPr5B’;}

SVGアニメーションの再生タイミングについてSVGアニメーションの再生タイミングについて

今回は前回書きました『IllustratorからSVGを書き出して、SVGアニメーションを追加する』の関連記事です。SVGアニメーションの再生タイミングにかなりハマったのでもう少し詳しくご紹介したいと思います。OPERAさんの2006年(!)の記事に、詳しい解説がありましたので、参考にしています。こうして見てみると、枯れた技術かと思われていたSVGに再び光が当たった感がありますね。  animate要素の追加  例えば、以下のようなanimate要素を追加したい場合。 <animate attributeName=”opacity” begin=”indefinite” to=”0″ dur=”0.25″ fill=”freeze”