在画布中将多个对象移动到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坐标

回答

相关问题