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 Demo ，它可以在画布上循环绘制图像。

Answer 1

在第一次抽奖尝试之前，您的图像可能尚未完成加载。

以下是确保您的图片已完成加载的语法：

＆＃13;

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";

＆＃13;

编辑1 - PROMISES

使用多张图片：

列出来源
map生成DOM节点
在Promise

Promise.all

然后绘制图像

＆＃13;

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

＆＃13;

Answer 2

我会对Emil采用类似的方法，只有差异有一个单独加载它们的方法，一旦图像加载，尝试加载下一个等等......

看看：

var canvas = document.getElementById("canvas");

// setting canvas size
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

在画布上绘制图像循环不工作

2 个答案: