1

可能重复：
jQuery 等价于获取 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

})
4

2 回答 2

2

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

作为一般说明

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

于 2013-02-04T13:43:36.400 回答
1

代替 //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

于 2013-02-04T13:27:19.170 回答