是否可以在HTML5画布中使用多个图像？

我试图将10个不同的图像加载到画布中。我的计划是最终为这些图像制作动画，但现在它们似乎正在相互覆盖。这里是我的代码：是否可以在HTML5画布中使用多个图像？

var DrawLetters = function() 
{ 
    for (i = 0; i < howManyLetters; i++) 
    { 
     thisWidth = letters[i][0]; 
     thisHeight = letters[i][1]; 
     imgSrc = letters[i][2]; 
     letterImg = new Image(); 
     letterImg.onload = function() 
     { 
      context.drawImage(letterImg,thisWidth,thisHeight); 
     } 
     letterImg.src = imgSrc; 
    } 
};

字母是一个包含10个元素的数组，其中每个元素包含图像的路径。任何帮助，将不胜感激。

来源

2011-04-14 Dexter

你知道你在for循环中使用全局变量吗？ – Phrogz 2011-04-14 15:49:38

我会的。这只是目前的概念证明，并不意味着通过JSLint分析。我只是想让这些作品能够在全面书写之前证明我可以做我想做的事情。 – Dexter 2011-04-15 12:57:13

我试过你的代码，onload方法总是使用变量的最后值，而不是数组迭代时的值。

尝试X和Y设置为图像对象的属性：

// I assume you are storing the coordinates where the letters must be 
letterImg.setAtX = letter[i][XPOS]; 
letterImg.setAtY = letter[i][YPOS];

和在onload：

context.drawImage(this, this.setAtX, this.setAtY);

this是图像提高onload事件。

编辑我改变了用来携带坐标的属性。现在他们被设置为A/X。你不能使用x和y，因为它们是保留的。

来源

2011-04-14 13:36:35 helios

工作就像一个魅力！谢谢！ – Dexter 2011-04-14 14:42:46

欢迎。请享用！ – helios 2011-04-14 15:55:47

您必须每次重新定位绘制起始位置，以免图像被覆盖。

[context . drawImage(image, dx, dy, dw, dh)][1]

链接上有一张图片，解释每个参数的含义。

来源

2011-04-14 13:28:34 Felipe

你在同一点上绘制它们。 drawImage并不关心给定参数的高度或宽度;它只是想要一个图像和一个坐标。请参阅https://developer.mozilla.org/en/Canvas_tutorial/Using_images

因此，您需要为图片提供更多数据;是这样的：

thisWidth = letters[i][0]; 
    thisHeight = letters[i][1]; 
    imgSrc = letters[i][2]; 
    thisX = letters[i][3]; //<--- 
    thisY = letters[i][4]; //<--- 
    letterImg = new Image(); 
    letterImg.onload = function() 
    { 
     context.drawImage(letterImg, thisX, thisY, thisWidth, thisHeight); 
     //or, just 
     context.drawImage(letterImg, thisX, thisY); 
    } 
    letterImg.src = imgSrc;

编辑：只是有一个想法 - 你可以做到这一点dymagically：

context.drawImage(letterImg, letters[i-1][0]+thisWidth, letters[i-1]+thisHeight, thisWidth, thisHeight);

用这种方式，你必须检查的东西，但我觉得你得到的意向整体。

来源

2011-04-14 13:28:34 Zirak

对不起，我的变量名称不清楚。它们不应该是这个宽度和这个高度，那些实际上是X，Y的坐标，它们都是独一无二的。 – Dexter 2011-04-14 14:34:52

是否可以在HTML5画布中使用多个图像？

回答

相关问题