gpt4 book ai didi

JavaScript drawImage() 不起作用

转载 作者:行者123 更新时间:2023-11-28 04:51:13 27 4
gpt4 key购买 nike

我正在尝试编写一些简单的游戏,但我一直在 Canvas 上绘制资源。我创建了一个 AssetsLoader“类”来加载图像并将其保存为图像对象。一开始我只想绘制一些加载的资源。但是drawImage函数没有显示任何东西......我知道我的图像是通过在consol上编写对象来加载的,这给了我这个输出:<img name="player" src="../assets/images/player.png">

  var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
if(!context){
alert('Upgrade browser');
}else{
startGame();
}

function startGame(){
AssetsLoader.getAllAssets();
console.log(AssetsLoader.images.player); // image is loaded
context.drawImage(AssetsLoader.images.player, 0, 0); // doesn't work
}

编辑:好吧,我的错,我把“../”放在图像路径前面,因为我的项目结构如下所示:

assets
images
player.png
js
script for AssetsLoader

我想我必须下一层才能访问图像。

最佳答案

我实际上只是在 Canvas 上修复了这个。固定代码为:

  var canvas = document.getElementById('game');
var context = canvas.getContext('2d');
var img1 = new Image();
img1.src = "../assets/images/player.png";

context.drawImage(img1,100,100);

创建 img1 变量的原因是因为它将 img 元素添加到 Canvas 中。然后使用 img1.src 设置图像的来源。当我执行drawImage()时,首先,我插入包含图像源的img1。第二个参数是 X 位置,第三个参数是 Y 位置。

关于JavaScript drawImage() 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42890039/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com