[HTML5]canvasのgetContextをJQueryで実行する方法

  1. ホーム
  2. HTML5
[HTML5]canvasのgetContextをJQueryで実行する方法

HTML5でcanvasのgetContext()をJQueryで実行させようとコードを書いてみたけど上手くいかない!なぜ?そんなあなたに失敗例からその原因、解決法までを教授します。

var c=document.getElementById("rectangle");
var ctx=c.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,100);
ctx.lineTo(100,100);
ctx.lineTo(100,0);
ctx.closePath();

ctx.fillStyle="blue";
ctx.fill();

上記のコードはrectangleと名づけられたidのcanvas要素に青い四角形を描く時のものです。このように特定のcanvasにだけ描きたい時は、これで何の問題も無いのですが、例えばclass名がふられた複数のcanvasに同じ図形を描く場合などは、次のようにコードが長くなってしまい、面倒です。

var l=document.getElementsByClassName("rectangles").length;
for(var i=0; i<=l; i++){

  var c=document.getElementsByClassName("rectangles")[i];
  var ctx=c.getContext("2d");

  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(0,100);
  ctx.lineTo(100,100);
  ctx.lineTo(100,0);
  ctx.closePath();

  ctx.fillStyle="red";
  ctx.fill();

}

まずlengthプロパティからclassの総数を取得し、順番に1つずつ最後の要素まで実行することを繰り返す・・・。「せっかく新しいHTML5の機能なのに、こんな面倒臭いもんなの?」と思いませんか?もしここでJQueryが使えたら、次のように少し簡潔にコードを記すことができるはずです。

$(".rectangles").each(function(){
  var ctx=$(this).getContext("2d");

  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(0,100);
  ctx.lineTo(100,100);
  ctx.lineTo(100,0);
  ctx.closePath();

  ctx.fillStyle="red";
  ctx.fill();

});

JQueryのセレクターとeach()メソッドを使うことで、スッキリしたコードで記すことができました・・・、かのように思えますが、実はこれでは動作しません。これは失敗例なのです。

なぜ動かないのか?それはgetContext()メソッドがDOMメソッドであり、JQueryオブジェクトにではなく、DOMエレメントに対して実行されるものだからです。つまりこれが原因です。ちなみにこの時のJQueryオブジェクトは配列を成しています。

var l=$(".rectangles").length;
for(var i=0; i<=l; i++){

  var ctx=$(".rectangles")[i].getContext("2d");

  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(0,100);
  ctx.lineTo(100,100);
  ctx.lineTo(100,0);
  ctx.closePath();

  ctx.fillStyle="red";
  ctx.fill();

}

ですので解決法も結局はこのようにlengthプロパティとfor文で書くしかないのです。

var ctx=$(".rectangles").get(i).getContext("2d");

あるいはこのようにget()メソッドでJQueryオブジェクトからDOMエレメントを取り出すか、になりますが、これも同じことですね。

「canvasのgetContextをJQueryで実行する方法」はあるにはあるものの、コードがちょっとだけ短くなるだけでしかなかった、ということになります。

Twitter Facebook LINE はてブ