Javascript JS画布-以指定角度绘制线

我想做一个应用程序，其中一个球移动的角度，你的鼠标击中它。因此，如果你从左上象限以30度（我猜是180-30=150度角）向下滑动鼠标，它会以这种方式撞击球。我一直在画这样的线：

        function drawAngles () {
            var d = 50; //start line at (10, 20), move 50px away at angle of 30 degrees
            var angle = 80 * Math.PI/180;
            ctx.beginPath();
            ctx.moveTo(300,0);
            ctx.lineTo(300,600); //x, y
            ctx.moveTo(0,300);
            ctx.lineTo(600,300);
            ctx.moveTo(300,300);
            ctx.lineTo(600,100);
            ctx.arc(300,300,300,0,2*Math.PI);
            ctx.stroke();
        }

但这并不能让我知道角度是什么

然后我以该角度移动球（目前，我在不使用鼠标交互的情况下对其设置动画）

那么如何以指定角度绘制直线？我想确保我的球沿着那条路径移动。

---

您可以使用不同的方法来实现这一点，但如果您想使用相同的基础来移动和绘制，那么这种方法可能非常适合

首先，我们使用函数根据角度（弧度）获得x和y的步长值：

然后使用这些步长值，我们可以缩放它们以获得终点，或者逐渐缩放它们以沿直线设置对象动画。一个简单的循环可以如下所示（仅举个例子）：

然后划它

---

希望这有帮助

如果我猜对了，我想你希望鼠标像棒球棒一样，你需要测量当前鼠标的角度，也就是存储以前的鼠标位置并做一些数学运算

如果您已经准备好处理当前的碰撞，您还必须保持跟踪，以避免球“粘滞”，并跟随鼠标

var ctx=cv.getContext（'2d'）；
变量球={
x:200，y:200，
r:30，
vx:0.4，vy:0.4
}
//当鼠标移动该距离时，球的速度标准值为1
var-speedNorm=10；
var CollisionContinuous=假；
函数collide（）{
var dist=sq（球x-mx）+sq（球y-my）；
//离球太远了？
如果（dist>sq（ball.r））{
冲突进行中=错误；
返回；
}
//如果已处理冲突，则返回
如果（冲突进行中）返回；
var mouseDist=Math.sqrt（sq（mx lastmx）+sq（my lastmy））；
//如果鼠标太慢，则不会发生碰撞
if（mouseDist400）ball.vx=-Math.abs（ball.vx）；
if（ball.x400）ball.vy=-Math.abs（ball.vy）；
如果（ball.y
        function getAngleX (x) {
            return x = x + (50 * Math.cos(Math.PI/6));          
        }
        function getAngleY(y) {
            return  y = y + (50 * Math.sin(Math.PI/6));
        }

            //just animate this box to move at an angle from center down at 30 degrees
            $(".anotherBox").mouseenter(function(e) {
                pos =  $(this).position();
                box2X = pos.left;
                box2Y = pos.top;    

                $(this).animate({
                    //top : $(window).outerHeight(),
                    top : getAngleY(box2Y)+"px",
                    left: getAngleX(box2X)+"px",
                }, "slow");     
            });

function getSteps(angle) {

    var cos = Math.cos(angle),
        sin = Math.sin(angle);

    return {
        x: cos -sin,
        y: sin + cos
    }
}

function loop() {

    var x = i * step.x,  // scale using i
        y = i * step.y;

    ctx.fillRect(200 + x, 200 + y, 2, 2); // add to origin start point 200, 200

    i += 1;              // increase i

    if (i < length) requestAnimationFrame(loop);
}

function lineAtAngle(x1, y1, length, angle) {
    ctx.moveTo(x1, y1);
    ctx.lineTo(x1 + length * Math.cos(angle), y1 + length * Math.sin(angle));
}

var ctx = cv.getContext('2d');

var ball = {
    x:200, y:200, 
    r : 30,
    vx : 0.4, vy:0.4
}

// when mouse moved that distance, ball speed norm will be 1
var speedNorm = 10;

var collisionOnGoing = false;

function collide() {
    var dist = sq(ball.x - mx) + sq (ball.y-my); 
    // too far from ball ?
    if (dist > sq(ball.r)) { 
        collisionOnGoing = false;
        return;
    }
    // return if collision allready handled
    if (collisionOnGoing) return;
    var mouseDist =Math.sqrt( sq(mx-lastmx) + sq(my-lastmy) );
    // no collision if mouse too slow
    if (mouseDist<speedNorm/5) return;
    // launch the ball in current direction
    // with a speed relative to the mouse speed.
    var mouseAngle = Math.atan2(my-lastmy, mx-lastmx);
    ball.vx= (mouseDist / speedNorm ) * Math.cos(mouseAngle);
    ball.vy= (mouseDist / speedNorm ) * Math.sin(mouseAngle);
    collisionOnGoing = true;    
}

function animate() {
    requestAnimationFrame(animate);
    ctx.clearRect(0,0,400,400);
    // collide ball with mouse
    collide();
    // draw ball
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.r, 0, 6.3);
    ctx.fill();
    ctx.closePath();
    // move
    ball.x+=ball.vx;
    ball.y+=ball.vy;
    // collide with screen
    if (ball.x>400) ball.vx=-Math.abs(ball.vx);
    if (ball.x<0) ball.vx=Math.abs(ball.vx);
    if (ball.y>400) ball.vy=-Math.abs(ball.vy);
    if (ball.y<0) ball.vy=Math.abs(ball.vy);
}

animate();

//  ---  Mouse handling ---

addEventListener('mousemove', mouseMove);

var mx=-1, my=-1, lastmx=-1, lastmy=-1;
var cvRect = cv.getBoundingClientRect();
var cvLeft = cvRect.left;
var cvTop = cvRect.top;
function mouseMove(e) {
    lastmx = mx; lastmy=my;
    mx=e.clientX - cvLeft; 
    my=e.clientY - cvTop;
}

function sq(x) { return x*x;  }