Javascript 在矩形中移动对象_Javascript_Html5 Canvas

Javascript 在矩形中移动对象

javascript html5-canvas

Javascript 在矩形中移动对象,javascript,html5-canvas,Javascript,Html5 Canvas,假设我有一个物体（比如一个球），我想在一个矩形（或正方形、三角形）中移动。我知道我可以用正反方向移动圆形（或任何其他圆形）中的对象，但是如何在矩形/三角形中移动呢下面是代码示例： function Ball(radius, color) { this.radius = radius || 40; this.color = color || "#ff0000"; this.x = 0; this.y = 0; this.rotation = 0;

假设我有一个物体（比如一个球），我想在一个矩形（或正方形、三角形）中移动。我知道我可以用正反方向移动圆形（或任何其他圆形）中的对象，但是如何在矩形/三角形中移动呢

下面是代码示例：

function Ball(radius, color) {
    this.radius = radius || 40;
    this.color = color || "#ff0000";
    this.x = 0;
    this.y = 0;
    this.rotation = 0;
    this.scaleX = 1;
    this.scaleY = 1;
    this.lineWidth = 1;
}

Ball.prototype.draw = function (c) {
   // code for drawing ball
}

function drawRightTriangle(h, w, range) {
   // Code for triangle 
}


// Initialize the ball
var ball = new Ball();

ball.x = cw/2, ball.y = ch/2, ball.radius = 10;

var speed = 0.05,
    range = 50,
    height = 0,
    hypo = 0,
    base = 0;

// Here I have use, base = 3, hypo = 5, height = 3 for limits;
(function drawFrame() {
    window.requestAnimationFrame(drawFrame);
    c.clearRect(0, 0, cw, ch);

    ball.x = cw/2 + base*range;
    if(base > 3) {
        base = 3;
        ball.y = ch/2 - height*range;
        height += speed;
        if(height > 4) {
            height = 4;
            // Now what to do 
            // Also, I think this function is messy.
        }
    }

    base += speed;
    drawRightTriangle(4, 3, range);
    ball.draw(c);

}());

这是我到目前为止所做的演示：

您可以沿着这样的线段获得XY

var dx = endX - startX;
var dy = endY - startY;

var x = startX + dx*percent;
var y = startY + dy*percent;

如果你想以匀速制作动画，它会变得有点复杂

您必须预先计算要行驶的距离（线段长度总和）

然后你需要沿着路径以相等的距离移动你的球

下面是代码和小提琴：


正文{背景色：象牙色；填充：10px；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“红色”；
点=[{x:50，y:125}，{x:200，y:50}，{x:200，y:200}，{x:50，y:125}]；
var-totDistance=0；
对于（var i=0；i0）{
//检查我们是否完成了
if（currentPoint>=points.length-1）{console.log（“完成”）；return；}
var pt0=点[currentPoint]；
var pt1=点[currentPoint+1]；
var dx=pt1.x-pt0.x；
var dy=pt1.y-pt0.y；
var lastX，lastY；
如果（pt0.untraveled），我认为如果您还添加一些您已经拥有的代码，以便使用sin/cos移动它，这将是非常有用的，这样我们可以更好地可视化它。
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

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

<script>
$(function(){

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

    points = [{x:50, y:125},{x:200,y:50},{x:200,y:200},{x:50,y:125}];

    var totDistance=0;

    for (var i = 0; i<points.length-1;i++){
        var p = points[i],
            q = points[i+1],
            dx   = p.x - q.x,         
            dy   = p.y - q.y,         
            dist = Math.sqrt(dx*dx + dy*dy);
            totDistance+=dist;
            points[i].dist=dist;
            points[i].untraveled=dist;
    }

    var steps=150;
    var distancePerStep=totDistance/steps;
    var totTraveled=0;
    var currentPoint=0;

    // drop first ball 
    drawBall(points[0].x,points[0].y);

    animate();

    function animate(){

        var mustTravel=distancePerStep;

        while(mustTravel>0){

            // check if we're done
            if(currentPoint >= points.length-1){console.log("done"); return;}

            var pt0=points[currentPoint];
            var pt1=points[currentPoint+1];
            var dx=pt1.x-pt0.x;
            var dy=pt1.y-pt0.y;
            var lastX,lastY;

            if(pt0.untraveled<mustTravel){

                // travel this whole segment
                lastX=pt1.x;
                lastY=pt1.y;

                // and reduce d by length traveled
                mustTravel -= pt0.untraveled;
                pt0.untraveled = 0;
                if(mustTravel<1){mustTravel=0;}

                // go onto the next point
                currentPoint++;

            }else{

                // travel only part of this segment
                // It has enough available length to complete travel

                // start at the previously traveled point on the segment
                var prevTraveled = pt0.dist - pt0.untraveled;
                var x1 = pt0.x + dx * prevTraveled/pt0.dist;
                var y1 = pt0.y + dy * prevTraveled/pt0.dist;

                // travel only part of segment
                var x2 = x1 + dx * mustTravel/pt0.dist;
                var y2 = y1 + dy * mustTravel/pt0.dist;

                // update segement and untraveled
                lastX=x2;
                lastY=y2;
                pt0.untraveled -= mustTravel;
                mustTravel=0;;

            }

        }

        // drop a ball 
        drawBall(lastX,lastY);

        setTimeout(animate,17);
    }


    function drawBall(x,y){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        drawPath();
        ctx.beginPath();
        ctx.arc(x,y,10,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    }

    function drawPath(){
        ctx.beginPath();
        ctx.moveTo(points[0].x,points[0].y);
        for(var i=1;i<points.length;i++){
            var point=points[i];
            ctx.lineTo(point.x,point.y);
        }
        ctx.stroke();
    }



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

</head>

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