类上的 HTML5 画布 jQuery getContext答案

【问题标题】：HTML5 canvas jQuery getContext on classes类上的 HTML5 画布 jQuery getContext
【发布时间】：2012-10-26 10:10:39
【问题描述】：

此代码有效：

<canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(0, 200);
      context.lineTo(578, 0);
      context.stroke();

      context.beginPath();
      context.moveTo(0, 0);
      context.lineTo(578, 200);
      context.stroke();
    </script>

我尝试在 jQuery 中做同样的事情，但没有成功：

"Object [object Object] 没有方法 'getContext'"

var context = $('.dropzone').getContext('2d');
context.beginPath();
context.moveTo(0, 200);
context.lineTo(578, 0);
context.stroke();

context.beginPath();
context.moveTo(0, 0);
context.lineTo(578, 200);
context.stroke();

我什至在 stackoverflow 上读到我应该试试这个（没用）

在代码中添加了 [0]。

"对象 # 没有方法 'getContext'"

var context = $('.dropzone')[0].getContext('2d');

问题

我想在每个 .dropzone 中“绘画”。那不可能吗？怎么样？

【问题讨论】：

标签： jquery html canvas

【解决方案1】：

使用.each()

$('.dropzone').each(function(index, element) {
    var context = element.getContext('2d');
    context.beginPath();
    context.moveTo(0, 200);
    context.lineTo(578, 0);
    context.stroke();

    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(578, 200);
    context.stroke();   
});

这是example on jsfiddle。

【讨论】：

【解决方案2】：

那是因为你在 jquery 中使用了类。

改变这个

var context = $('.dropzone').getContext('2d');

到

var context = $('#dropzone').getContext('2d');

【讨论】：

我有无限多个dropzone，不能使用ID。
然后使用each()循环跟随其余答案。
@JensTörnell 这就是 .getContext 不起作用的原因，也许有人可以重新制定答案以反映此错误？

【解决方案3】：

您需要使用.each() 来遍历该类的所有元素。

$('.myCanvas').each(function() {
   var canvas = $(this)[0];
   var context = canvas.getContext('2d');
  // Do stuff
});

Working JSFiddle.

【讨论】：