JQuery 等价于获取 Canvas 的上下文

我有以下工作代码:

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

有没有办法重写它来使用 $? 这样做是失败的:

ctx = $("#canvas").getContext('2d');
104299 次浏览
小开
最佳答案

试试:

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

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

小开

我还发现，通常更喜欢使用. get (0)将 jquery 目标引用为 HTML 元素:

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

也许是为了避免任何潜在的 null 对象引用，因为 jquery 将 null 作为对象返回，但是使用。Get (0)可能不会这么默默地失败... ... 您可以很容易地检查画布是否是先找到的。得(0)喜欢

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

这个脚本在找到“画布”之前就可以工作了

 $(document).ready(function() {
ctx = $("#canvas");
});
小开 
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 是一种简单的方法，可以确保在完全创建画布元素并将其注册到 DOM 之前不会尝试调用它。

小开

试试这个

Let ctx = $(‘ Canvas’)[0]


提交答案