关于类的HTML5 canvas jQuery getContext

此代码有效：

  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();  

我试图在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中“画画”。 这不可能吗？ 怎么样？

Answer 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(); }); 

这是jsfiddle的一个例子 。

Answer 2

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

改变这个

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

至

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

Answer 3

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

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

工作JSFiddle 。