3

このコードは機能します：

<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で同じことをしようとしましたが、うまくいきませんでした。

"オブジェクト[オブジェクトオブジェクト]にはメソッド'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で「ペイント」したい。それは不可能ですか？どのように？

4

3 に答える 3

2

これは、jqueryでクラスを使用しているためです。

これを変える

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

に

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

于 2012-10-26T10:13:32.447 に答える
2

使用する.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の例です。

于 2012-10-26T10:13:50.787 に答える
2

.each()そのクラスですべての要素を反復処理するためにを使用する必要があります。

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

作業 中のJSFiddle。

于 2012-10-26T10:16:24.420 に答える