滚动背景图像

发布于 2024-10-22 04:50:13 字数 422 浏览 0 评论 0原文

我正在尝试为我正在开发的游戏获取滚动背景图像。上面的代码适用于 Mac 上的 Safari,但不适用于 iPad。我的猜测是,backgroundY 会产生负数,这又会引发错误“INDEX_SIZE_ERR: DOM Exception 1”

backgroundY += 5;
if (backgroundY >= 3834) backgroundY = 0;
bg.drawImage(backgroundImg, 0, -backgroundY, 960, 4930);

关于如何轻松滚动适用于 iPad 的背景图像有什么想法吗?理想情况下,我想实例化图像并让它通过 javascript 而不是 CSS 滚动。如果我可以将图像的注册点更改为右下角,则它永远不会收到负图像。基本上,图像应该在屏幕上向上飞来模拟坠落的感觉。

先感谢您!

I'm trying to get a scrolling background image to work for a game I'm developing. The above code works fine for Safari on a Mac, however, it doesn't work on an iPad. My guess is that the backgroundY is resulting in a negative number which in turn throws me an error "INDEX_SIZE_ERR: DOM Exception 1"

backgroundY += 5;
if (backgroundY >= 3834) backgroundY = 0;
bg.drawImage(backgroundImg, 0, -backgroundY, 960, 4930);

Any ideas on how to easily scroll a background image that will work on the iPad? Ideally I'd like to instance the image and have it scroll through javascript as opposed to CSS. If I could possibly change the registration point of the image to the lower right corner, it wouldn't ever receive a negative image. Basically, the image is supposed to fly upwards on screen to emulate a sense of falling.

Thank you in advance!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

黄昏下泛黄的笔记 2024-10-29 04:50:13

尝试使用 getImageDataputImageData

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas

现在我不建议在任何其他情况下这样做,但下面是我使用 get/putImageData 组合在一起的示例。最主要的是你只能获取画布大小范围内的图像数据,放回图像数据也是如此。在下面的示例中,没有使用负值。

实例

Try using getImageData, along with putImageData

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas

Now I dont recommend doing this for any other circumstance, but below is an example I put together using get/putImageData. The main thing is you can only get image data thats within the size of your canvas, and the same goes with putting back the imagedata. In the below example no negative values are used.

Live Example

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文