在画布上的循环中绘制图像不起作用

本文介绍了在画布上的循环中绘制图像不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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.

推荐答案

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

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-承诺

处理多张图片:

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

Promise

然后绘制图像

List sources
map to generates DOM nodes
Setup a Promise per DOM node in a Promise.all
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);
    }
  });

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

LastOne