在画布上的循环中绘制图像不起作用 [英] Drawing image on canvas in loop not working

问题描述

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(Nine)图像，但lastOne(10th)图像未绘制在画布上.我尝试了上面的代码，但没有成功.任何人都可以知道解决该问题的方法.

My above code draw only 9(Nine) images but lastOne(10th) image not drawing on canvas. I tried above code but not getting success. Anyone can know solution for this problem.

任何人都可以帮助我找到在线的 JSFiddle演示，它可以在画布上循环绘制图像.

Can any one help me to find out online JSFiddle Demo which draw image on canvas in loop.

推荐答案

也许您的图像在第一次绘制尝试之前尚未完成加载.

Perhaps your image isn't finished loading before your first draw attempt.

以下是确保图像加载完成的语法:

Here is the syntax to make sure your image has finished loading:

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.all
中的每个DOM节点上设置Promise
4. 然后绘制图像

1. List sources
2. map to generates DOM nodes
3. Setup a Promise per DOM node in a Promise.all
4. Then draw images

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

这篇关于在画布上的循环中绘制图像不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！