HTML5 Canvas对象

Question

我有一个HTML页面内画布HTML元素：

<canvas id="myCanvas2" width="290" height="250" style="background-color:red"></canvas> 

我想使用jQuery来访问画布。如果我试图访问使用jQuery它不工作，如果我尝试使用document.getElementById，那么只有它的工作。

下面是代码：

var canvas = $("#myCanvas2"); 
console.log("Canvas : " + canvas + ", typeof : " + typeof(canvas)); 
canvas = document.getElementById('myCanvas2'); 
console.log("Canvas 2 : " + canvas + ", typeof : " + typeof(canvas)); 

应该不是$（ “＃myCanvas2”）;和document.getElementById（'myCanvas2'）;相同？

我收到的控制台以下：

Canvas : [object Object], typeof : object 
    Canvas 2 : [object HTMLCanvasElement], typeof : object 

可以在画布上的HTML元素来使用jQuery访问？

谢谢。

Answer 1

jQuery总是围绕DOM节点包装他的方法。这不仅是帆布的情况。

如果您要访问通过jQuery的DOM节点画布，你将不得不使用.get() method：

$("canvas").get(0).getContext("2d"); 
// or short hand 
$("canvas")[0].getContext("2d"); 

注意你必须通过一个index得到，所以你得到的DOM节点。否则，您将拥有一组DOM节点。