使用精灵表创建 HTML 5 动画答案

【问题标题】：Creating HTML 5 animation Using sprite sheet使用精灵表创建 HTML 5 动画
【发布时间】：2021-05-10 14:43:11
【问题描述】：

我正在尝试使用以下图像创建画布动画..

请检查链接。 https://i.stack.imgur.com/Pv2sI.jpg

像普通动画一样，我正在尝试运行这个精灵表图像，但我在某处失败了。

这是我的代码 -->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

 <canvas id='canvas'></canvas><br />
 <button onclick='moveLeft()'>Left</button>
 <button onclick='moveRight()'>Right</button>
 <script>
 var canvasWidth = 650; 
 var canvasHeight = 350;
 
 var spriteWidth = 379; 
 var spriteHeight = 133; 
 
 var rows = 2; 
 var cols = 8; 
 
 var trackRight = 0; 
 var trackLeft = 1; 
 
 var width = spriteWidth/cols; 
 var height = spriteHeight/rows; 
 
 var curFrame = 0; 
 var frameCount = 8; 
 
 var x=0;
 var y=200; 
 
 var srcX; 
 var srcY; 
 
 var left = false; 
 var right = true;
 
 var speed = 12; 
 
 var canvas = document.getElementById('canvas');
 canvas.width = canvasWidth;
 canvas.height = canvasHeight; 
 
 var ctx = canvas.getContext("2d");
 
 var character = new Image(); 
 character.src = "jpg.jpg";
 
 function updateFrame(){
 curFrame = ++curFrame % frameCount; 
 srcX = curFrame * width; 
 ctx.clearRect(x,y,width,height); 
 
 if(left && x>0){
 srcY = trackLeft * height; 
 x-=speed; 
 }
 if(right && x<canvasWidth-width){
 srcY = trackRight * height; 
 x+=speed; 
 }
 }
 
 function draw(){
 updateFrame();
 ctx.drawImage(character,srcX,srcY,width,height,x,y,width,height);
 }
 
 
 function moveLeft(){
 left = true; 
 right = false; 
 }
 
 function moveRight(){
 left = false;
 right = true; 
 }
 
 setInterval(draw,100);
 
 </script>
</body>
</html>

但这似乎不能正常工作。它以奇怪的状态运行。只喜欢图像的中心区域。我能做什么？

【问题讨论】：

标签： javascript html css canvas

【解决方案1】：

您的 spritesheet 未正确完成，每个步骤的宽度必须相同，否则您的动画会发生变化。此外，您可以仅使用 css 为 spritesheet 设置动画。我以这个 spritesheet 为例：https://www.codeandweb.com/o/blog/2016/05/10/how-to-create-a-sprite-sheet/spritestrip-1536.png

<body>
    <style>
        #animSheet {
            background-image: url("spritesheet.png");
            width: 256px;
            height: 256px;
            animation: animSheet 1s steps(6) infinite;
        }

        @keyframes animSheet {
            0% {
                background-position: 1536px;
            }

            100% {
                background-position: 0px;
            }
        }
    </style>

<div id="animSheet"></div>

【讨论】：