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

在我的jsfiddle中看到，我有3个画布呈现一个形状，但它只在最后一个画布上呈现。我想我可能会错过一些东西，但是我已经绕过了画布元素，所以我认为它只会对所有这些元素起作用。我对Javascript很陌生，所以很抱歉，如果它的思想拙劣。为什么画布形状仅在最后一个画布上渲染3个？

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

来源

2016-05-17 Elevant

直到for循环完成执行完成后，onload才会运行。然后onload运行，ctx将成为循环的最后一个上下文。 – Blindman67

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

来源

2016-05-18 02:35:53 1cgonza

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

回答

相关问题