Question

我在html中遇到了canvas问题。我想绘制多个画布图像。我创建了一个创建多个画布的循环，然后我想在每个画布中绘制一个图像。

for (var i = 1; i <= playerStuff.MovingCards.length; i++){
    $("#playersField").append("<canvas id='movingCardsField"+i+"' height='"+movingCardSizeY+"'\n\
                             width='"+movingCardSizeX+"'\n\
                             data='"+playerStuff.MovingCards[i-1].movePoints+"'></canvas>");
    var imgObj = new Image();
    var drawField = document.getElementById('movingCardsField'+i).getContext("2d"); 
    imgObj.onload = function(){
            drawField.drawImage(imgObj, 0,0);
    };
    imgObj.src = "./img/moveCards/"+playerStuff.MovingCards[i-1].name;
}

结果是只有最后一个画布具有绘制的图像。我在这里缺少什么？

Answer 1

因为onload y asinchronous，当for的迭代结束时，onload可能还没有被调用。然后drawField变量是最后一个元素。以快速的方式解决这个问题（但不是最干净的解决方案）

变量的范围与c ++或其他语言不同。

for (var i = 1; i <= playerStuff.MovingCards.length; i++){
    (function(element) {
        $("#playersField").append("<canvas id='movingCardsField"+i+"' height='"+movingCardSizeY+"'\n\
                         width='"+movingCardSizeX+"'\n\
                         data='"+element.movePoints+"'></canvas>");
        var imgObj = new Image();
        var drawField = document.getElementById('movingCardsField'+i).getContext("2d"); 
        imgObj.onload = function(){
            drawField.drawImage(imgObj, 0,0);
        };
      imgObj.src = "./img/moveCards/"+element.name;
})(playerStuff.MovingCards[i - 1]);

}

这可能会成功，或多或少，我没有检查两次代码

btw效率也不高

这应该是更好的东西

var domElement = $("#playersField");
var canvasStart = "<canvas id='movingCardsField";
var canvasEnd = "' height='"+movingCardSizeY + "'width='" + movingCardSizeX + "' data='" + element.movePoints + "'></canvas>";

function createCanvas(element) {
    var canvas = canvasStart + (i + 1) + canvasEnd;
    domElement.append(canvas);

    var imgObj = new Image();
    var drawField = document.getElementById('movingCardsField' + (i + 1)).getContext("2d"); 
    imgObj.onload = function() {
        drawField.drawImage(imgObj, 0,0);
    };
    imgObj.src = "./img/moveCards/" + element.name;
}

for (var i = 0; i < playerStuff.MovingCards.length; i++) {
    createCanvas(playerStuff.MovingCards[i]);
}

Answer 2

请不要使用JQuery。一般来说，我不是JQuery的朋友，但这是我个人的意见，但在这里你应该真的不用，更快地使用DOM。

var playersField=document.getElementById("playersField");
var canvasElements=new Array ();
var canvasElement, drawField,imgObj;
var drawFields=new Array ();

for (var i = 0; i <= playerStuff.MovingCards.length; i++)
  {
  canvasElement=document.createElement ("canvas");
  canvasElement.height=movingCardSizeY;
  canvasElement.width=movingCardSizeX;
  canvasElement.data=playerStuff.MovingCards[i-1].movePoints;
  playersField.appendChild(canvasElement);

  drawField=canvasElement.getContext("2d");
  drawFields.push (drawField);
  imgObj = new Image();
  imgObj.src = "./img/moveCards/"+playerStuff.MovingCards[i-1].name;
  imgObj.index=i;

  imgObj.onload = function (){
        drawFields[this.index].drawImage(this, 0,0);
  };

html5绘制多个画布图像

2 个答案: