如何解决是否可以在HTML5画布中使用多个图像?
| 我正在尝试将10个不同的图像加载到画布中。我的计划是最终为这些图像制作动画,但现在它们似乎正在相互覆盖。这是我的代码: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;
}
};
letters是具有10个元素的数组,其中每个元素都包含图像的路径。任何帮助,将不胜感激。
解决方法
我已经尝试过您的代码,并且onload方法始终使用vars的LAST值,而不是迭代数组时的值。
尝试将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
是引发the4ѭ事件的图像。
编辑我已经更改了用于携带坐标的属性。现在它们是setAtX / Y。您不能使用x和y,因为它们已保留。
,您在同一点上绘制它们。 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,thisY);
}
letterImg.src = imgSrc;
编辑:刚刚有一个想法-您可以动态地做到这一点:
context.drawImage(letterImg,letters[i-1][0]+thisWidth,letters[i-1]+thisHeight,thisHeight);
通过这种方式,您将不得不检查内容,但是我认为您已掌握了总体意图。
,您每次必须重新定位绘制开始位置,以免图像被覆盖。
[context . drawImage(image,dx,dy,dw,dh)][1]
链接上有一张图片,说明每个参数的含义。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。