精灵表不起作用

Posted

技术标签:

【中文标题】精灵表不起作用【英文标题】：Sprite sheet won't work 【发布时间】：2017-03-13 00:42:17 【问题描述】：

所以我使用在线教程 (onlyWebPro.com) 让圣诞老人在我的屏幕上跑来跑去。但它就是不动。我正在使用 frameCount，所以我真的不明白为什么它没有移动。谁能帮我？请放心，我是学生。

<html>
<head>
    <meta charset="UTF-8" />
    <title>Santa</title>
</head>
<body>
    <canvas id="myCanvas"  >
        Sorry, your browser doesn't support canvas technology
    </canvas>
<script>
    var width = 100,
            height = 100,
            frames = 5,

            currentFrame = 0,

            canvas = document.getElementById("myCanvas");
            ctx = canvas.getContext("2d");
            image = new Image()
            image.src = 'img/santa-run-sequence.png';

    var draw = function()
            ctx.clearRect(0, 0, width, height);
            ctx.drawImage(image, 390, 1, 128.333, 210, 100, 500,  128.333, 210);

            if (currentFrame == frames) 
              currentFrame = 0;
             else 
              currentFrame++;
            
    

    setInterval(draw, 100);


</body>
</html>

【问题讨论】：

【参考方案1】：

您已经获得了该行中图像位置的硬编码值：

ctx.drawImage(image, 390, 1, 128.333, 210, 100, 500,  128.333, 210);

相反，您可以添加 x 和 y 变量，这些变量将在每一帧中增加。让我们修改您的 draw 函数以执行以下操作：

ctx.drawImage(image, x, y, 128.333, 210);

if (currentFrame == frames) 
  currentFrame = 0;
 else 
  x += 5
  y += 5
  currentFrame++;

别忘了在你的脚本标签上定义x 和y：

var x = 10; // start X position
var y = 10; // start Y position

【讨论】：

以上是关于精灵表不起作用的主要内容，如果未能解决你的问题，请参考以下文章

插入蜂巢表不起作用

将存储过程数据插入临时表不起作用

bigrquery：使用 geoJSON 文件创建 BigQuery 表不起作用

通过立即执行创建表不起作用

Google Cloud Dataproc 删除 BigQuery 表不起作用

pgadmin 4 导入/导出表不起作用