読者です 読者をやめる 読者になる 読者になる

html5のcanvasを重ねあわせて,いろいろ遊ぶ

js プログラミング

html5canvasがなかなか面白い.
お絵かき的な使い方がメインにはなるのだけれど,ほとんどすべてjsでいじくり倒せるので,とても面白い.


そんなcanvasを重ねてみた.
いわゆる,レイヤー的な使い方ができるので,おすすめです.


ちなみに,レイヤー用canvasの生成もjs内で行います.
そしてそこに画像を描画していく!(描画するものはなんでもいいです).

$("#figure").click( function(){
  var $img_canvas = addCanvas(100,100);
  var img_ctx = $img_canvas[0].getContext('2d');
  var img = new Image();
  img.src = "filename.png";
  img.onload = function(){
    img_ctx.drawImage(img, 0, 0, 100, 100);
  }
});

function addCanvas(width, height){
  var id = "canvas" + Math.round(Math.random() * 10000).toString();
  $("#figure").append(
    $('<canvas></canvas>')
      .addClass("cv")
      .attr('id', id)
      .attr('width', width)
      .attr('height', height)
  );
  var canvas = $("#"+ id);
  if (!canvas || !canvas[0].getContext){
    return null;
  }
  return canvas;
}

なんかidはつけてもつけなくてもいいのですが,適当にランダム変数当ててみました.


【未解決】

ソース内のaddCanvas関数なのですが,addCanvas関数の動作をイベント内で直接実装したところ,上手く画像が描画されませんでした.

画像の描画関連も,ロード終了を待ってからにしていますが,canvas関連もappendが終わる前に走っている可能性もあります.
とりあえず,関数実行にしたところ,正常に動作しました.

原因がわかりません.

【注意】

canvasは今のところ親子構造を持てません.

つまり

<canvas id="parent">
 <canvas id="children"></canvas>
</canvas>

ということはできません.

なので,重ね合わせるために,cssのpositionプロパティを使いたい場合は,親divを発行します.

div{
 position: relative;
}

canvas{
 position: absolute;
}

とした上で,

<div>
<canvas id="parent"></canvas>
<canvas id="children"></canvas>
</div>

という形を取らないと,重ね合わせることができません.