Question

可能重复：
jQuery equivalent of getting the context of a Canvas

我的问题是：

1）为什么评论代码的行为不像上面那样（即为什么会抛出错误）？

$(function () {
  $('#ex4').append('<canvas class=can ></canvas>');
  $('#ex4').append('<canvas class=can ></canvas>');
  $('#ex4').append('<canvas class=can ></canvas>');

  $('#ex4 canvas').each(function (index, element) {
    $(this).attr("width", "125")
    $(this).attr("height", "50")

    var context = element.getContext("2d");
    //var context = $(this).getContext("2d");   error

    context.strokeStyle = "red";
    context.fillStyle = "#999900";
    context.font = "30px Arial";
    context.fillText("HTML5", 0, 35);
  });
})

2）如何在下面的类似代码中解决错误（可能与上面相同）？

$.each(data[0], function (i) {
  $('#content').append('<canvas id=' + i + ' class=can ></canvas>');
  $('#content #' + i).attr("width", "125")
  $('#content #' + i).attr("height", "50")

  //var context = $('#content #'+i).getContext("2d"); error

})

Answer 1

getContext是canvas元素的方法，而不是jQuery方法。

您看到的任何对象$(...)都是jQuery对象，您只能从该对象访问jQuery方法和属性。要访问jQuery对象的底层元素，可以像数组一样取消引用它。例如jQuery对象中的第一个元素是$(...)[0]，依此类推。

在each循环的上下文中，标记为element的对象实际上是HTML元素（在本例中为canvas元素），这就是该行有效的原因。 this和element在那里是同义词，因此您可以使用其中任何一个。 $(this)和$(element)都是jQuery对象。

同样，在第二个示例中，$('#content #'+i)引用了一个jQuery对象，$('#content #'+i)[0]为您提供了底层DOM元素。

$('#content #'+i)[0].getContext("2d"); //yields appropriate result

作为一般性说明

当您尝试在jq对象上调用Object xyz has no method 'abc'时，您无疑会收到错误消息getMethod或类似内容，这通常表明您正在将某个方法链接到某个结构为您的结构上'误解 - 并且通常是一个好的迹象，你应该去咨询你正在使用的对象的API。将对象记录到控制台通常也可以很好地了解它的结构，在这种情况下，这样做会告诉你实际上你没有在画布上操作。

Answer 2

而不是//var context = $(this).getContext("2d");

使用：var context = $(this)[0].getContext("2d");

而不是：//var context = $('#content #'+i).getContext("2d"); error

使用：var context = $('#content #'+i)[0].getContext("2d"); error

$（this）与$ .each循环上下文中的'element'参数不同

2 个答案:

作为一般性说明