Question

此代码有效：

<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] 。

“对象＃＆lt; HTMLDivElement＆gt;没有方法'getContext'”

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

问题

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

Answer 1

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

更改此

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

到

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

Answer 2

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

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

Working JSFiddle

Answer 3

使用.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。

关于类的HTML5 canvas jQuery getContext

3 个答案: