Question

正如我在jsfiddle上看到的，我有3幅画布渲染一个形状，但它只在最后一个画布上渲染。我想我可能会遗漏一些东西，但是我已经在画布元素上循环，所以我认为它只适用于所有这些元素。我是Javascript的新手，如果它的愚蠢思考就很抱歉。

var c = document.getElementsByClassName("myCanvas");

for (var canvas of c) {

var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.rect(150, 0, 3, 75);

var img = new Image();
img.src = "https://assets.servedby-buysellads.com/p/manage/asset/id/26625";
img.onload = function() {
    var pattern = ctx.createPattern(this,"repeat");
    ctx.fillStyle = pattern;
    ctx.fill();
};
ctx.closePath();

}

我的小提琴：

Here is my JSFiddle

Answer 1

你从getElementsByClassName获得的是一个HTMLCollection而不是一个对象，所以你循环遍历它们就像循环数组一样。

您尝试使用for (var canvas of c)来尝试循环它，如果它是一个对象，它应该是for (var canvas in c)。但如前所述，你所拥有的不是一个对象。

然后，您需要考虑图像上的onload函数是异步的。由于您对所有这些图像使用相同的图像，因此可以加载图像一次，然后在加载图像后绘制所有画布。

var c = document.getElementsByClassName("myCanvas");
// First load the image
var img = new Image();
img.onload = function() {
  // Once the image is ready, loop through the HTMLCollection
  for (var i = 0; i < c.length; i++) {
    var canvas = c[i];
    var ctx = canvas.getContext("2d");
    var pattern = ctx.createPattern(img, "repeat");
    ctx.beginPath();
    ctx.rect(150, 0, 3, 75);
    ctx.fillStyle = pattern;
    ctx.fill();
  }
};
img.src = "https://assets.servedby-buysellads.com/p/manage/asset/id/26625";

为什么画布形状仅在3个最后一个画布上呈现？

1 个答案: