Javascript 将画布中的多个对象移动到x、y坐标_Javascript_Html_Canvas_Game Physics

Javascript 将画布中的多个对象移动到x、y坐标

javascript html canvas

Javascript 将画布中的多个对象移动到x、y坐标,javascript,html,canvas,game-physics,Javascript,Html,Canvas,Game Physics,我正在尝试对多个对象使用“moveTo（x，y）”（by）函数。这就是我尝试过的。这就是我试图做的：在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 = star

我正在尝试对多个对象使用“moveTo（x，y）”（by）函数。这就是我尝试过的。这就是我试图做的：

在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);

pct+=0.01；
//如果未完成，请请求另一个动画帧
如果（pct<1.00）{
请求动画帧（动画）；
}
//计算下一个XY位置
var nextX=启动x+dx*pct；
var nextY=启动时间+dy*pct；
//画形状
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);
};

var shapesLength=shapes.length；
对于（var i=0；i


但是出了点问题，我不知道是什么。
出了问题的是requestAnimFrame在您的循环中
在循环外调用requestAnimFrame一次
下面是示例代码和提琴：
下面是一个如何为每个形状实现多个航路点的示例：如何创建对象的即时生成并在到达目标点后使用它们？shapes[]数组包含将绘制和设置动画的所有形状的定义。在这种情况下，形状都是具有开始/结束动画点和颜色的矩形。如果要即时生成对象，只需将新对象添加到shapes[]数组中即可。如果希望对象在到达目标点后消失，请删除以下行：drawShape（shape，shape.waypoints.length-1）<代码>函数go（）{points=pointsToSingleArray（[{x:48，y:2}，{x:48，y:485}]）；形状。推送（{width:shapeWidth，height:shapeHeight，waypoints:points，color:“red”}）；}设置超时（go，3000）<!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>

// 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();