javascript画布动画_Javascript_Animation_Canvas

javascript画布动画

javascript animation canvas

javascript画布动画,javascript,animation,canvas,Javascript,Animation,Canvas,我正在尝试使用纹理图集和画布标记来制作一些动画。我没有得到任何错误，但我看到的是最后一帧。我应该做些什么，这样我才能看到所有的“框架” 我已经在纹理图集上对x/y坐标进行了硬编码测试，所以我知道我可以在它周围巡游这是我的密码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h

我正在尝试使用纹理图集和画布标记来制作一些动画。我没有得到任何错误，但我看到的是最后一帧。我应该做些什么，这样我才能看到所有的“框架”

我已经在纹理图集上对x/y坐标进行了硬编码测试，所以我知道我可以在它周围巡游

这是我的密码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Animation</title>
<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">

<!-- javascript -->

<script language="javascript">

var textureAtlas = new Image();
var moeImg = new Image();

function init() { 

    animateProps = new Array;

    textureAtlas.src = "images/textureatlast1.png";
    moeImg.src = "images/moe.jpg";
    var textureAtlasCoords = new Array("0,0", "100,0", "200,0", "300,0", "400,0", "500,0", "600,0");

        for(var c=0; c<textureAtlasCoords.length; c++) {

            animateObj = new Object();

            var thisCoord = textureAtlasCoords[c];
            var thisCoordSplit = thisCoord.split(",");
            var thisX = thisCoordSplit[0];
            var thisY = thisCoordSplit[1]; 

            //var a = setTimeout(Function(){animate(ctx, textureAtlas, thisX, thisY)},1000);
            animateObj['canvasId'] = "princessAnimation"; 
            animateObj['imgsrc'] = textureAtlas;
            animateObj['x'] = thisX;
            animateObj['y'] = thisY;

            animateProps.push(animateObj);

            var a = setInterval(function(){animate(animateProps);},1000);

        }

        clearInterval(a);

}


function imgDraw(ctx, thisImg) { 

    console.log(thisImg);
    //(image, x(
    ctx.drawImage(thisImg,0,0, 1024, 451, 0, 0, 1024, 451);

}

function animate() { 

        //get animation properties
        for(thisProp in animateProps) {
            var canvasId = animateProps[thisProp]['canvasId']; 
            var thisImg = animateProps[thisProp]['imgsrc'];
            var thisX = animateProps[thisProp]['x'];
            var thisY = animateProps[thisProp]['y'];

        }

        var canvas = document.getElementById(canvasId);
    if (canvas.getContext){

        var ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,1024,451);
        ctx.drawImage(thisImg,thisX,thisY, 1024, 451, 0, 0, 1024, 451);
    }

}
</script>

<!-- stylesheets -->

<!--conditional comments -->

</head>

<body onload="init();">


<div id="animationWrapper">
    <canvas width="100" height="150" id="princessAnimation"></canvas>
</div>

</body>
</html>


画布动画
var textureAtlas=新图像（）；
var moeImg=新图像（）；
函数init（）{
animateProps=新数组；
textureAtlas.src=“images/textureatlast1.png”；
moeImg.src=“images/moe.jpg”；
var textureAtlasCoords=新数组（“0,0”、“100,0”、“200,0”、“300,0”、“400,0”、“500,0”、“600,0”）；
对于（var c=0；c

这是我正在处理的图像（注意：我知道我的坐标在每个文件中都处于关闭状态，现在我只是想让转换工作，然后我会微调x/y坐标（当然，除非你想为我这样做。：D）

这是间隔。在启动animate之前，您将设置所有间隔，覆盖上一个间隔。因此，您只需继续打印0600坐标。从我所看到的情况来看，这并不是唯一的错误，但这也是您只获得最后一张图像的原因

按下每个坐标，然后使用间隔在动画中循环。在所有坐标都按下之前，不要设置间隔，然后使用全局值来计算步数，动画增量（在重新绘制到画布时）

例如（简化，这可能需要一些工作才能按您想要的方式工作）：

var textureAtlas=new Image（），
步长=0，最大步长=0；
//var moeImg=新图像（）；
var a；
函数init（）{
animateProps=新数组；
textureAtlas.src=“textureatlas1.png”；
//moeImg.src=“images/moe.jpg”；
var textureAtlasCoords=新数组（“0,0”、“100,0”、“200,0”、“300,0”、“400,0”、“500,0”、“600,0”）；
maxsteps=textureAtlasCoords.length；
对于（var c=0；c=maxsteps）步骤=0；
//获取动画属性
var canvasId=animateProps[steps]['canvasId']；
var thisImg=animateProps[setps]['imgsrc']；
var thisX=animateProps[steps]['x']；
var thisY=animateProps[steps]['y']；
var canvas=document.getElementById（canvasId）；
if（canvas.getContext）{
var ctx=canvas.getContext（'2d'）；
ctx.clearRect（0,01024451）；
console.log（thisX+“”+thisY）；
ctx.drawImage（thisImg，thisX，thisY，1024451,0,0,1024451）；
}
steps++；
}

我对

ctx.drawImage（thisImg，thisX，thisY，1024，451，0，0，1024，451）；

…我觉得您没有将映像绑定到正确的参数。请记住，ctx.drawImage是 args的img、sx、sy、sw、sh、dx、dy、dw、dh。图像。 sx、sy、sw、sh-剪辑到由此定义的矩形。 dw，dh-这些尺寸的比例 dx，dy-这里的位置

希望这能对你有所帮助。

我不知道你希望这能起什么作用。一些更正：1）

animateProps=[]；

2）你不能在JavaScript数组上使用（uuu-in-array）3）

animateObj={}；

4）

函数animate（animateProps）{

5）使用HTML5 doctype2：它对我有效，复制我的代码和console.log（animateProps[thisProp]['canvasId']）；您将获得princessAnimation，这就是我要传递的内容。由于我将对象存储为数组中的第一项，因此我假设它的工作方式与此数组[0]['princessAnimation']其中数组的第0项是对象。3:我以前使用过它--它可能会导致一些垃圾问题，但它是有效的…4:？不确定您在这里想说什么。如果您质疑setInterval，您不能将变量传递给setInterval中的函数，您可以将它们作为第三个参数添加，但这会导致IE问题，请使用closure解决了这个问题-5：让我做了这个，但我的辩护是为了好玩和学习，我只是从我的尾声片段中抓取了一个片段而没有看…谢谢你的帮助，这是有意义的，除了我如何将x个动画帧循环到animate（）中之外，在上面的代码中，setInterval不会只触发一次吗？setInterval是基于窗口的（

window.setInterval（fn，interval）

），并且会继续触发，直到间隔被清除（

clearInterval（a）

）.Hah！抱歉我错过了。你是对的-变量上存在范围问题。你设置了它，但无法清除间隔。将var（a）设置为全局，以备以后需要清除。

var textureAtlas = new Image(),
    steps = 0, maxsteps = 0;
//var moeImg = new Image();
var a;


function init() { 

  animateProps = new Array;

  textureAtlas.src = "textureatlas1.png";
  //moeImg.src = "images/moe.jpg";
  var textureAtlasCoords = new Array("0,0", "100,0", "200,0", "300,0", "400,0", "500,0", "600,0");
  maxsteps = textureAtlasCoords.length;
    for(var c=0; c<textureAtlasCoords.length; c++) {

      animateObj = new Object();

      var thisCoord = textureAtlasCoords[c];
      var thisCoordSplit = thisCoord.split(",");
      var thisX = thisCoordSplit[0];
      var thisY = thisCoordSplit[1]; 

      //var a = setTimeout(Function(){animate(ctx, textureAtlas, thisX, thisY)},1000);
      animateObj['canvasId'] = "princessAnimation"; 
      animateObj['imgsrc'] = textureAtlas;
      animateObj['x'] = thisX;
      animateObj['y'] = thisY;

      animateProps.push(animateObj);
    }
    a = setInterval(function(){animate(animateProps);},1000);
}
function animate() { 
    if(steps>=maxsteps) steps =0;
    //get animation properties

      var canvasId = animateProps[steps]['canvasId']; 
      var thisImg = animateProps[setps]['imgsrc'];
      var thisX = animateProps[steps]['x'];
      var thisY = animateProps[steps]['y'];

    var canvas = document.getElementById(canvasId);
  if (canvas.getContext){

    var ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,1024,451);
    console.log(thisX+" "+thisY);
    ctx.drawImage(thisImg,thisX,thisY, 1024, 451, 0, 0, 1024, 451);
  }
  steps++;
}