显示GIF的JavaScript函数
显示GIF的JavaScript函数
提问于 2018-07-14 20:32:17
我刚刚开始使用HTML5。我用C写了很多程序，但现在我想学习HTML5。我正在尝试写一个关于僵尸的游戏，我需要显示一个GIF，但我的函数showGif不工作，我不知道为什么。你能帮帮我吗?
我首先显示背景图像，然后尝试在画布内的背景上显示GIF。
我不知道如何在这里附加图像文件，但代码中的源代码是正确的，我仔细检查了一下。
可能有更多的错误，而不仅仅是在函数中，我希望你能指出它们，这样我就可以学习了。
window.onload = function()
{
var c=document.getElementById("gameCanvas");
var ctx=c.getContext("2d");
var background = new Image();
background.src = "imgs/background.png";
background.onload = function()
{
ctx.drawImage(background, 0, 0);
};
var imgSrc = ["imgs/zombieGif/frame0.png", "imgs/zombieGif/frame1.png", "imgs/zombieGif/frame2.png", "imgs/zombieGif/frame3.png", "imgs/zombieGif/frame4.png", "imgs/zombieGif/frame5.png", "imgs/zombieGif/frame6.png", "imgs/zombieGif/frame7.png"];
showGif(imgSrc, 8);
function showGif(imgSrc, num)
{
for(var i=0; i<num; i++)
{
var curImg = new Image();
curImg.src = imgSrc[i];
curImg.style.zIndex = "1";
curImg.onload = function()
{
ctx.drawImage(curImg, 0, 0);
};
}
}
};body {
text-align: center;
}
canvas {
border: 1px solid black;
}
h1 {
font-size: 60px;
font-family: 'Architects Daughter', cursive;
}<!DOCTYPE html>
<html>
<head>
<title>Zombies</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<h1>Zombies</h1>
<canvas id="gameCanvas" width="1140" height="540"></canvas>
</body>
</html>
感谢您抽出宝贵的时间。
附言:对不起，我的英语偶尔会出错。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-14 20:39:44
您绘制的是一个空白图像，因为当您设置图像的源时，浏览器必须发出HTTP请求并加载图像元素中的数据。同时，javascript代码正在运行(这称为异步加载)，因此当您到达ctx.drawImage方法时，浏览器仍在发出加载图像的HTTP请求。
画布并不是一个元素，它会随着你的图像更新而更新。画布只是一组像素，您可以在其中绘制元素。就是这样，像素画布，就像画布一样。
您需要加载图像，等待它们被加载，并在图像元素加载了所有图像数据之后在画布中绘制所有图像像素。可以将事件处理程序附加到load事件。
要做到这一点，你需要学习回调之类的东西，所以如果你不知道我在说什么，就不要试图从屋顶上建造房子。获取“乞讨者的javascript”教程，从头开始阅读。特别搜索一些关于异步回调的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51338522
复制相关文章
相似问题
腾讯云开发者
