画布和 jQuery：为什么不 getContext()答案

【问题标题】：Canvas and jQuery: why doesn't getContext()画布和 jQuery：为什么不 getContext()
【发布时间】：2014-08-16 22:54:52
【问题描述】：

我已阅读 this 和 this，但我的问题没有解决方案。如果我用 jQuery 创建一个画布，然后通过document.getElementById() 调用它，我可以调用getContext('2d') 并且它可以工作。像这样：

var ctx =
    $('<canvas />')
    .attr({
        id: 'canvasMenuSmall',
        width: '500px',
        height: '500px'
    })
    .appendTo('body');
var c=document.getElementById("canvasMenuSmall"),
    ctx=c.getContext('2d');

但是，如果我尝试立即在对象上调用 getContext('2d')，它不会出现错误 Uncaught TypeError: undefined is not a function：

var ctx =
    $('<canvas />')
    .attr({
        id: 'canvasMenuSmall',
        width: '500px',
        height: '500px'
    })
    .appendTo('body')
    .getContext('2d'); // error raised

怎么来的？

【问题讨论】：

标签： jquery html canvas

【解决方案1】：

您的代码不起作用，因为您尝试获取上下文 of jQuery，而不是 DOM 元素。不要将getContext 链接到appendTo，而是使用jQuery 来获取元素。

工作声明将是

$().appendTo("#place")[0].getContext()

而不是

$().appendTo("#place").getContext()

【讨论】：

我在这里找到了答案：stackoverflow.com/questions/14647629/…我只需要使用get(0)获得真正的DOM对象
是的，也可以。为了更好的可读性，我个人会将getContext() 放在自己的声明中。
.get(0).getContext('2D') 可以附加到 appendTo 之后的原始查询的末尾，尽管这有点难以阅读，因为它结束了 jQuery 链，imoho。我会这样做：var ctx = ..; ctx.get(0).getContext('2D');
@user2864740 是的，这就是 Olivier 在他的第一条评论中所说的。我知道他在说什么。我编辑了问题以允许两个选项。
使用jq[0] 或jq.get(0)，而不是jq.get()[0]。

【解决方案2】：

.getContext('2d') 不是 jQuery 相关的东西......它是一个 dom 对象的方法。

.getElementById() 返回一个 dom 元素，这就是它在那里工作的原因。

【讨论】：