html5 绘制多个画布图像

Question

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

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

请不要为此使用 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);
  };

Answer 2

那是因为 onload 是异步的，当 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]);

}

这可能会起作用，或多或少，我没有检查两次代码

顺便说一句，效率也不是很高

这应该更好

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]);
}