ChatGPT解决这个技术问题 Extra ChatGPT

jQuery 相当于获取 Canvas 的上下文

我有以下工作代码:

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

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

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

M
Matt

尝试:

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

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


O
OG Sean

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

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

也许是为了帮助避免任何潜在的 null 对象引用,因为 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');

M
MistyDawn
try{ 
   ctx = $('#canvas').get(0).getContext('2d');
}catch(e){ 
    console.log('We have encountered an error: ' + e);
}

或者...

if( typeof $('#canvas') === 'undefined'){ 
    var canvas = '<canvas id="canvas"><\/canvas>';
    $('body').append(canvas);
}
setTimeout( function(){ ctx = $('#canvas').get(0).getContext('2d'); }, 500);

使用 setTimeout 是一种简单的方法,可确保您在 canvas 元素完全创建并注册到 DOM 之前不会尝试调用它。


这个问题是在您回答之前 8 年提出的。在回答之前检查它被问到的日期!
我不确定为什么为“旧”问题添加另一个相关答案是一件坏事。本网站是供当前和未来用户使用的资源。谷歌一直向当前用户提供旧问题。因此,如果我们登陆它们,我们应该让它们保持最新状态。
U
Umer Iqbal

尝试这个

让 ctx = $('canvas')[0]


а
александр лобазов

该脚本在找到“画布”之前有效

 $(document).ready(function() {
   ctx = $("#canvas");
});