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節點。