【问题标题】:Image not showing up on canvas element图像未显示在画布元素上
【发布时间】:2012-05-23 01:23:12
【问题描述】:

所以,我一直在尝试使用我的游戏引擎制作一个滚动射击游戏示例,但我遇到了一些奇怪的事情。我尝试绘制的某个图像没有显示出来。它显示在 Chrome 的资源中,因此不是路径问题。我尝试显示的所有其他图像也显示出来。如果有人可以帮助我,将不胜感激。 =)

参考链接:

http://pandamochi.x10.bz/scrollingshooter.html

绘图代码:

ctx.save();
        if (this.sprite != ""){
            ctx.translate(Math.round(this.x-ds_view.x), Math.round(this.y-ds_view.y));
            ctx.scale(this.scaleX,this.scaleY);
            ctx.rotate(this.rotateZ);
            ctx.translate(-this.width/2,-this.height/2);
            ctx.drawImage(this.sprite, this.width*this.sprite_index, 0, this.width, this.height, 0, 0, this.width, this.height);
        }
        ctx.restore();

我用来设置的代码:

enemy.setSprite("images/ship.png",1,4,10);

【问题讨论】:

  • 查看您的开发者控制台错误日志以查看您遇到的错误。
  • 尝试不同的图像,以便排除代码问题。如果另一个图像有效,您就知道该图像有问题,您可以尝试重新创建/保存。
  • 该图像显示在 chrome 的资源中...以及我尝试工作的所有其他图像。_.

标签: javascript image html canvas html5-canvas


【解决方案1】:

编辑

所以是的,我离题了。

ctx.drawImage(this.sprite, this.width*this.sprite_index, 0, this.width, this.height);

翻译导致您的问题。我改变了上面的线,实际上可以看到船的图纸。这不是最完整的答案,但希望它能让您走上正轨。

Live Demo

【讨论】:

  • 你确定吗?图像 ship.png 完美地显示在 chrome 的资源中,尽管没有显示在画布中......
  • @pandavenger 不,对不起,我走得太远了。查看我编辑的答案。无耻的插件,我如何处理我的绘图,github.com/loktar00/jest 和使用引擎的类似游戏somethinghitme.com/pprojects/shump
  • 哦,我明白了...我一定是从实际图像中绘制了某个地方...一旦您指出了我的问题,我就找到了一个可以帮助我的链接。谢谢! developer.mozilla.org/en/Canvas_tutorial/Using_images
  • 嗯...这很奇怪,我很肯定我的脚本是正确的...其他一切都显示得很好...只是一张图片 =(
猜你喜欢
  • 2012-12-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-25
  • 1970-01-01
  • 1970-01-01
  • 2016-08-31
  • 2015-12-02
相关资源
最近更新 更多