jQuery相当于获取Canvas的上下文

Question

我有以下工作代码:

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

有没有办法重新编写使用$？这样做失败了:

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

Answer 1

尝试:

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

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

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