使用PIXI JS图像精灵不会显示在我的画布中

时间:2019-11-28 10:15:06

标签: javascript image canvas sprite pixi.js

我的图像精灵(game.player_booba)没有出现,我也不明白为什么。尽管修改了它在x和y中的位置,但它并未出现。

game.player_booba.init();
game.player_booba.sprite.image.addEventListener("load", (event) => {
  window.requestAnimationFrame(game.loop);

});

我的代码笔:     https://codepen.io/manonragnotti/pen/abbeEKO

谢谢

1 个答案:

答案 0 :(得分:0)

说实话,我什至不知道这个问题与PIXI有什么关系。您已经将其包含在您的codePen项目中,但实际上从未使用过该库。所有渲染都直接使用本地2d canvas API完成。而没有在屏幕上绘制字符精灵的原因是因为它是在画布上绘制的,因此从未添加到DOM中。在此行上看​​到

buffer = document.createElement("canvas").getContext("2d");

您正在创建canvas元素,然后将其2d上下文分配给变量“ buffer”,但是DOM元素实际上从未添加到文档中。因此,您需要执行以下操作:

bufferCanvas = document.createElement("canvas");
buffer = bufferCanvas.getContext("2d");
window.document.body.appendChild(bufferCanvas);