jQuery等效于获取Canvas的上下文

2020/11/03 14:02 · javascript ·  · 0评论

我有以下工作代码:

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

有什么办法可以重写它来使用$吗?这样做失败:

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

尝试:

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

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

我还看到,通常首选使用.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');
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之前不要尝试调用它的一种简便方法。

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

 $(document).ready(function() {
   ctx = $("#canvas");
});
本文地址:http://javascript.askforanswer.com/jquerydengxiaoyuhuoqucanvasdeshangxiawen.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!