为什么在为画布声明变量时添加[0]？ [复制]答案

【问题标题】：Why add [0] when declaring a variable for canvas? [duplicate]为什么在为画布声明变量时添加[0]？ [复制]
【发布时间】：2016-01-13 10:24:57
【问题描述】：

在这段代码中：

var canvas = $("#myCanvas")[0];
var ctx = canvas.getContext("2d");

为什么我们必须添加[0] 来识别画布？这对我来说有点令人困惑，因为[n] 通常在有多个同名元素并且我们需要处理特定的元素时添加。但是一个 id 只能引用一个唯一的元素。

【问题讨论】：

jQuery 选择器可以返回多个对象，因此它们总是返回看起来像数组的东西。恕我直言，最好只使用canvas = document.getElementById('myCanvas')
... 或 document.querySelector("#myCanvas") 如果您需要更复杂的选择器。
因为要使用像 getContext() 这样的 javascript 方法，您需要返回实际的 dom 元素而不是 jQuery 数组。例如，执行 $("body").innerHTML 会给你 undefined 但 $("body")[0].innerHTML 会返回 body 的内容。

标签： javascript jquery canvas

【解决方案1】：

此语法用于从 jQuery 对象中检索底层画布 DOMElement，以便可以使用 getContext() 方法（jQuery 对象没有）。

$('#myCanvas')                      // = canvas DOMElement wrapped in a jQuery object
$('#myCanvas')[0]                   // = canvas DOMElement
document.getElementById('myCanvas') // = canvas DOMElement

另见：

What is a jQuery object

canvas API reference

【讨论】：

【解决方案2】：

jQuery always 返回一个类似数组的对象，即使您使用（唯一）id 作为选择器。

在您的情况下，[0] 将返回第一个（也是唯一一个）实际元素。

【讨论】：

@Oriol - 是的，我知道。这是在大脑投入使用之前打字太快的情况。感谢您指出我的错误