jQuery 相当于获取 Canvas 的上下文

Question

我有以下工作代码：

 ctx = document.getElementById("canvas").getContext('2d');

有没有办法重写它以使用 $ ？这样做会失败：

 ctx = $("#canvas").getContext('2d');

原文由 Claudiu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试：

 $("#canvas")[0].getContext('2d');

jQuery 在数字索引中公开了实际的 DOM 元素，您可以在其中执行普通的 JavaScript/DOM 函数。

原文由 Matt 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

我还看到通常首选使用 .get(0) 将 jquery 目标引用为 HTML 元素：

 var myCanvasElem = $("#canvas").get(0);

也许是为了帮助避免任何潜在的空对象引用，因为 jquery 将 null 作为对象返回，但是使用 .get(0) 中的元素可能不会如此默默地失败……您可以轻松地检查画布是否在 .get(0) 之前首先找到） 像

if( $("#canvas").length ) ctx = $("#canvas").get(0).getContext('2d');
else console.log('Error: Canvas not found with selector #canvas');

原文由 OG Sean 发布，翻译遵循 CC BY-SA 3.0 许可协议