繪製圖像在畫布上循環不工作

Question

var canvas = document.getElementById("canvas"); 
wheel = canvas.getContext("2d");   
for (var i = 0; i < 10; i++) { 
    var img = new Image; 
    img.src = image; 
    wheel.drawImage(img, -170, -10, 140, 140); 
} 

我上面的代碼只繪製9（9）圖像，但lastOne（10）圖像不畫在畫布上。我嘗試了上面的代碼，但沒有獲得成功。任何人都可以知道解決這個問題。

任何一個可以幫助我找出在線的jsfiddle演示其圖像繪製在畫布上的循環。

Answer 1

也許您的圖像未在第一次繪製嘗試前完成加載。

下面是語法，以確保您的圖像加載完畢：

var canvas = document.body.appendChild(document.createElement("canvas")); 
 
canvas.width = 1100; 
 
canvas.height = 110; 
 
var wheel = canvas.getContext("2d"); 
 
var img = document.createElement("img"); 
 
img.onload = function() { 
 
    for (var i = 0; i < 10; i++) { 
 
    wheel.drawImage(img, 5 + 110 * i, 5); 
 
    } 
 
}; 
 
img.src = "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100";

編輯1 - 承諾

多個圖像工作：

1. 個列出源
2. map到生成DOM節點
3. 設置一個Promise每DOM節點在Promise.all
4. 然後繪製圖像

var canvas = document.body.appendChild(document.createElement("canvas")); 
 
canvas.width = 1100; 
 
canvas.height = 110; 
 
var wheel = canvas.getContext("2d"); 
 
var images = [ 
 
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100", 
 
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=2&w=100&h=100", 
 
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=3&w=100&h=100", 
 
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=4&w=100&h=100", 
 
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=5&w=100&h=100", 
 
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=6&w=100&h=100", 
 
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=7&w=100&h=100", 
 
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=8&w=100&h=100", 
 
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=9&w=100&h=100", 
 
    "https://placeholdit.imgix.net/~text?txtsize=60&txt=10&w=100&h=100", 
 
    ] 
 
    .map(function(i) { 
 
    var img = document.createElement("img"); 
 
    img.src = i; 
 
    return img; 
 
    }); 
 
Promise.all(images.map(function(image) { 
 
    return new Promise(function(resolve, reject) { 
 
     image.onload = resolve; 
 
    }); 
 
    })) 
 
    .then(function() { 
 
    for (var i = 0; i < images.length; i++) { 
 
     var img = images[i]; 
 
     wheel.drawImage(img, 5 + 110 * i, 5); 
 
    } 
 
    });

Answer 2

我會做類似的方法到Emil，只有差別有一個方法，單獨加載它們，一旦圖像Loa DED，嘗試加載下一個等等...

看看：

var canvas = document.getElementById("canvas"); 
canvas.height = window.innerHeight - 10; 
canvas.width = window.innerWidth - 10; 
var image_test = document.querySelector(".hidden"); 
var count = 0; 
var total_images = 10; 
var wheel = canvas.getContext("2d");  
function loadImage() { 
    var img = new Image(); 
    img.onload = function() { 
    wheel.drawImage(this , 105 * count , 0 , 100, 100); 
    if(count < total_images) { 
     count++; 
     loadImage(); 
    } 
    } 
    // img.src = "image-" + count + ".jpg"; 
    img.src = "https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100"; 
} 
loadImage(); 
https://jsfiddle.net/gugalondon/r5xw6u7L/7/