在畫布中將多個對象移動到x，y座標

我正在嘗試使用this「moveTo（x，y）」（通過markE）函數獲取多個對象。 This是我試過的。而這正是我試圖做的：在畫布中將多個對象移動到x，y座標

計算和woriking例子是這樣的移動物體：

pct += .01; 
// if we're not done, request another animation frame 
if (pct < 1.00) { 
    requestAnimFrame(animate); 
} 

// Calculate the next XY position 
var nextX = startingX + dx * pct; 
var nextY = startingY + dy * pct; 

// Draw the shape 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.fillRect(nextX, nextY, 40, 30);

而這一點，我嘗試了多種形狀做：

var shapesLength = shapes.length; 
for (var i = 0; i < shapesLength; i++) {// Loop through every object 

var tmpShape = shapes[i];//selecting shape 

    tmpShape.pct += .01;// increment pct towards 100% 

    // if we're not done, request another animation frame 
    if (tmpShape.pct < 1.00) { 
     requestAnimFrame(animate); 
    } 

    // Calculate the next XY position 
    var nextX = tmpShape.startingX + tmpShape.dx * tmpShape.pct; 
     var nextY = tmpShape.startingY + tmpShape.dy * tmpShape.pct; 

    // Draw the shape 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.fillRect(nextX, nextY, 10, 10); 
};

但是出了點問題，我不知道是什麼。

來源

2013-10-12 eko24

什麼問題是requestAnimFrame在你的循環中。

你會想在你的循環之外調用requestAnimFrame一次。

下面是示例代碼和一個小提琴：http://jsfiddle.net/m1erickson/HAbfm/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> 
<script src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
    $(function(){ 

     var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 

     window.requestAnimFrame = (function(callback) { 
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
      function(callback) { 
      window.setTimeout(callback, 1000/60); 
      }; 
     })(); 

     var shapes=[]; 
     shapes.push({startX:10, startY:10, endX:140, endY:140, color:"red"}); 
     shapes.push({startX:280, startY:10, endX:150, endY:140, color:"green"}); 
     shapes.push({startX:10, startY:280, endX:140, endY:150, color:"blue"}); 
     shapes.push({startX:280, startY:280, endX:150, endY:150, color:"gold"}); 

     var pct=0.00; 
     var fps = 60; 

     animate(); 

     function animate() { 
      setTimeout(function() { 


       // increment the percent (from 0.00 to 1.00) 
       pct+=.01; 

       // clear the canvas 
       ctx.clearRect(0,0,canvas.width,canvas.height); 

       // draw all shapes 
       for(var i=0;i<shapes.length;i++){ 

        // get reference to next shape 
        var shape=shapes[i]; 

        // note: dx/dy are fixed values 
        // they could be put in the shape object for efficiency 
        var dx=shape.endX-shape.startX; 
        var dy=shape.endY-shape.startY; 
        var nextX = shape.startX + dx * pct; 
        var nextY = shape.startY + dy * pct;     
        var shape=shapes[i]; 
        ctx.fillStyle=shape.color; 
        ctx.fillRect(nextX,nextY,7,7); 
       } 

       if(pct<1.00){requestAnimFrame(animate)}; 


      }, 1000/fps); 
     } 


    }); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=350 height=350></canvas> 
</body> 
</html>

下面是如何實現多路點的每個形狀的例子：

http://jsfiddle.net/m1erickson/UNjdC/

[加法：解釋如何創建形狀和動畫]

您創建並動畫形狀分爲3個步驟：

在動畫過程中爲一個形狀創建多段線。
將新形狀推入形狀[]數組中。每個形狀對象都定義了自己的寬度，高度，顏色和動畫多段線。
所有新形狀位於shapes []數組中後，調用animate（）以沿着其自己的多邊形路徑設置所有形狀的動畫效果。

下面是上述步驟1-3中的碼位：

// 1. create a polyline for one shape to follow 

points = pointsToSingleArray([ 
    {x:48,y:2}, 
    {x:48,y:365} 
]); 


// 2. push the shape into the shapes array 
// 
// a shape object contains width/height/color and the polyline 

shapes.push({ 
    width: shapeWidth, 
    height: shapeHeight, 
    waypoints: points, 
    color: "red" 
}); 

// 3. After you've pushed all desired shapes into the 
// shapes[] array, call animate() to start draw all 
// objects along their own polyline paths. 

animate();

來源

2013-10-12 18:09:52 markE

下面是如何實現每個形狀的多個路點的例子：http://jsfiddle.net/m1erickson/UNjdC/ – markE

如何創建對象的即時生成並在到達目標點後對其進行清理？ – eko24

shapes []數組包含將繪製和動畫的所有形狀的定義。在這種情況下，形狀都是具有開始/結束動畫點和顏色的矩形。如果您想要立即生成對象，只需將新對象添加到shapes []數組。如果您希望對象在到達目標點後消失，請刪除以下行：drawShape（shape，shape.waypoints.length - 1）; – markE

在畫布中將多個對象移動到x，y座標

回答

相關問題