我正在尝试使用下面的图像创建一个画布动画..
请查看链接。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>
但这似乎不能正常工作。它的运行状态很奇怪。只像图像的中心区域。我能做什么?
你的精灵表没有正确地完成，每个步骤必须是相同的宽度，否则你会得到一个移动在你的动画。此外，你可以只使用css动画精灵表。我以这个精灵表为例: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>