javascript canvas动画

我正在尝试使用纹理地图集和画布标记来制作一些动画。我没有得到任何错误，但我所看到的只是最后一帧。有什么我应该做的，所以我看到所有的“帧”？javascript canvas动画

我已经测试了这个硬编码纹理地图集上的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>

这里是我一起工作的图像（注意：我知道我的坐标是关元文件，现在我只是想过渡到工作，我LL则微调x/y坐标（当然，除非你要为我做的：d）。

enter image description here

来源

2011-08-09 PruitIgoe

我不知道你期望这个如何工作。一些修正：1）'animateProps = [];'2）你不能在JavaScript数组中使用（_在数组中）3）'animateObj = {};'4）'animate（animateProps）{'5）使用HTML 5文档类型 – dtanders

2：它适用于我，复制我的代码和console.log（animateProps [thisProp] ['canvasId']）;你会得到princessAnimation，这正是我所传递的。由于我存储一个对象作为数组中的第一项，我假设它像这个数组[0] ['princessAnimation']那里工作，其中数组的项目0是对象。 – PruitIgoe

3：我以前用过这个 - http://stackoverflow.com/questions/684575/how-to-quickly-clear-a-javascript-object - 它可能导致一些垃圾问题，但它的工作原理... – PruitIgoe

它的时间间隔你生命的前设置它们全部是以往发射，覆盖以前的时间间隔，所以你只保留printi取出0,600坐标。从我看到的内容来看，这不是唯一的错误，但这是你只能得到最后一幅图像的原因。

推动每个坐标，然后使用间隔循环播放动画。不要设置间隔，直到它们全部被推入，然后使用全局来计算步数，在动画上增加（在重画到画布时）。

例如（简化，这可能需要一些工作来获取工作，你想要的样子）：我也没有ctx.drawImage(thisImg,thisX,thisY, 1024, 451, 0, 0, 1024, 451);那么肯定

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++; 
}

...我觉得你不将图像绑定到正确的参数。请记住，对于参数，ctx.drawImage是 img，sx，sy，sw，sh，dx，dy，dw，dh。 img - 图像。 sx，sy，sw，sh - 剪辑到由此定义的矩形。 dw，dh - 缩放至这些尺寸 dx，dy - 此处位置。

希望有助于一些。

来源

2011-08-09 18:33:19 stslavik

感谢您的帮助，除了我如何将x个动画帧循环为animate（），在上面的代码中不会setInterval只会触发一次？ – PruitIgoe

setInterval是基于窗口的（'window.setInterval（fn，interval）'），并继续触发，直到间隔被清除（'clearInterval（a）'）。 – stslavik

哈！对不起，我错过了。你是对的 - 这个变量有一个范围问题。你会设置它，但永远不能清除间隔。如果您需要稍后清除它，则创建var（a）全局变量。 – stslavik

javascript canvas动画

回答

相关问题