jQuery 等效于获取 Canvas 的上下文

javascript jquery html canvas

2022-08-30 02:20:53

我有以下工作代码：

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

有没有办法重写它来使用？执行此操作将失败：$

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

答案 1

尝试：

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

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

答案 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');