首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >显示GIF的JavaScript函数

显示GIF的JavaScript函数
EN

Stack Overflow用户
提问于 2018-07-14 20:32:17
回答 1查看 381关注 0票数 1

我刚刚开始使用HTML5。我用C写了很多程序,但现在我想学习HTML5。我正在尝试写一个关于僵尸的游戏,我需要显示一个GIF,但我的函数showGif不工作,我不知道为什么。你能帮帮我吗?

我首先显示背景图像,然后尝试在画布内的背景上显示GIF。

我不知道如何在这里附加图像文件,但代码中的源代码是正确的,我仔细检查了一下。

可能有更多的错误,而不仅仅是在函数中,我希望你能指出它们,这样我就可以学习了。

代码语言:javascript
复制
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);
            };
        }
    }
};
代码语言:javascript
复制
body {
  text-align: center;
}

canvas {
  border: 1px solid black;
}

h1 {
  font-size: 60px;
  font-family: 'Architects Daughter', cursive;
}
代码语言:javascript
复制
<!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>

感谢您抽出宝贵的时间。

附言:对不起,我的英语偶尔会出错。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-14 20:39:44

您绘制的是一个空白图像,因为当您设置图像的源时,浏览器必须发出HTTP请求并加载图像元素中的数据。同时,javascript代码正在运行(这称为异步加载),因此当您到达ctx.drawImage方法时,浏览器仍在发出加载图像的HTTP请求。

画布并不是一个元素,它会随着你的图像更新而更新。画布只是一组像素,您可以在其中绘制元素。就是这样,像素画布,就像画布一样。

您需要加载图像,等待它们被加载,并在图像元素加载了所有图像数据之后在画布中绘制所有图像像素。可以将事件处理程序附加到load事件。

要做到这一点,你需要学习回调之类的东西,所以如果你不知道我在说什么,就不要试图从屋顶上建造房子。获取“乞讨者的javascript”教程,从头开始阅读。特别搜索一些关于异步回调的内容。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51338522

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档