jquery - HTML5 画布对象

Question

我在 html 页面中有一个 canvas 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

可以使用 jquery 访问 canvas html 元素吗？

谢谢。

Answer 1

jQuery 总是将他的方法包裹在 DOM 节点周围。这不仅适用于画布。

如果你想通过 jQuery 访问 DOM 节点 Canvas，你必须使用.get()方法：

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

请注意，您必须通过 anindex才能获得 DOM 节点。否则，您将拥有一个 DOM 节点数组。