0

複数のキャンバスがあり、それぞれに data-id 属性があり、次のように画像を描画するために dataURL を取得するために使用されます。

<canvas data-id='2' class='drawing-result>

以下は、それらすべてを最後のキャンバスにのみ配置します。

var $canvases = $(".drawing-result");
for (var i=0; i<$canvases.length; i++){
  var canvas = $canvases.get(i);
  var context = canvas.getContext('2d');
  var imageObj = new Image();
  imageObj.onload = function(){
    context.drawImage(this, 0, 0);
  };
  // skipping the code for retrieving dataURL using data-id
  imageObj.src = dataURL;

いくつかのものを浅いコピーに関係している可能性があると思われますが、var をどこにでも置いているため、そうではありません。

4

1 に答える 1

2

JavaScript のvar変数宣言は、ブロック スコープではなく関数スコープです。あなたcontextはループが実行されるたびに上書きされています。

その for ループの代わりに、jQuery の.each()関数を使用します。

$(".drawing-result").each(function (i, canvas) {
  var context = canvas.getContext('2d');
  var imageObj = new Image();
  imageObj.onload = function(){
    context.drawImage(this, 0, 0);
  };
  // skipping the code for retrieving dataURL using data-id
  imageObj.src = dataURL;
});
于 2013-08-28T22:13:57.053 に答える