HTML5 canvas jQuery getContext по классам

Этот код работает:

<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] к коду.

"У объекта # <HTMLDivElement> нет метода 'getContext'"

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

Вопрос

Я хочу "рисовать" в каждой зоне .dropzone. Это не возможно? Как?

Ответы на вопрос(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();   
});

Вотпример на jsfiddle.

Вам нужно будет использовать.each() перебрать все элементы с этим классом.

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

Рабочая JSFiddle.

Изменить это

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

в

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

 Jens Törnell26 окт. 2012 г., 12:22
У меня неограниченное количество дропзон, я не могу использовать ID.
 Indolering26 мая 2013 г., 07:57
@ JensTörnell, вот почему .getContext не работает, возможно, кто-то может переформулировать ответы, чтобы отразить эту ошибку?
 261926 окт. 2012 г., 12:23
Затем следуйте остальным ответам, используяeach() петля.

Ваш ответ на вопрос