在画布上循环绘制图像不起作用答案

【问题标题】：Drawing image on canvas in loop not working在画布上循环绘制图像不起作用
【发布时间】：2017-07-19 09:56:36
【问题描述】：

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（九）张图像，但最后一张（第 10）张图像没有在画布上绘制。我尝试了上面的代码，但没有成功。任何人都可以知道这个问题的解决方案。

谁能帮我找出在线JSFiddle Demo在画布上循环绘制图像。

【问题讨论】：

您能否为您的问题创建一个小提琴示例，以便我们检查和纠正
是什么让你觉得第 10 个元素没有画出来？你在哪里设置image？这真的会帮助我们看到更完整的代码示例
你怎么知道只有九张图片？我的意思是同一个图像在同一个位置上九到十次应该不会有太大的不同吗？
制作JSFiddle示例代码后我会更新问题
谁能帮我找出在画布上循环绘制图像的jsfiddle。

标签： javascript jquery html canvas

【解决方案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 - 承诺

处理多个图像：

列出来源
map 生成 DOM 节点
在Promise.all 中为每个 DOM 节点设置一个 Promise
然后画图

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

【讨论】：

【解决方案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

【讨论】：