Javascript 具有画布直线ctx.lineTo（y角度）和（x到所需长度）的轨迹_Javascript_Canvas_Html5 Canvas

Javascript 具有画布直线ctx.lineTo（y角度）和（x到所需长度）的轨迹

javascript canvas html5-canvas

Javascript 具有画布直线ctx.lineTo（y角度）和（x到所需长度）的轨迹,javascript,canvas,html5-canvas,Javascript,Canvas,Html5 Canvas,我使用的是普通的html/javascript画布（没有库）。我有一种从两点计算角度的方法，我的理论是，我取这个角度，在这个角度上画一条线，通过循环所需的水平距离（x）并对角度进行一些计算，使其保持直线（y），我只能在谷歌上找到关于复杂曲线和圆线的东西。在每一个循环中，我都是通过自身来确定角度的吗？我不太擅长想象数字 var point1 = { x: 20, y: 20 }; var point2 = { x: 40, y: 40 }; // angle m

我使用的是普通的html/javascript画布（没有库）。我有一种从两点计算角度的方法，我的理论是，我取这个角度，在这个角度上画一条线，通过循环所需的水平距离（x）并对角度进行一些计算，使其保持直线（y），我只能在谷歌上找到关于复杂曲线和圆线的东西。在每一个循环中，我都是通过自身来确定角度的吗？我不太擅长想象数字

var point1 = {
    x: 20,
    y: 20
};

var point2 = {
    x: 40,
    y: 40
};

// angle method 1
var radians = Math.atan2(point2.y - point1.y, pv2.x - point1.x);

// angle method2
var degrees = Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180 / Math.PI;

更新：在MarkE的回答之后，事情看起来颠倒了，但是好多了

光线直线显示了波线从两点的角度，但角度是如何翻转的。。。我正在努力理解这一点

看起来我忘了sin..

你可以用三角法来计算x，y沿直线的指定长度，包括点1和点2

var dx=point2.x-point1.x;
var dy=point2.y-point1.y;
var radianAngle=Math.atan2(dy,dx);
var desiredLength=150;

var x=point1.x+desiredLength*Math.cos(radianAngle);
var y=point1.y+desiredLength*Math.sin(radianAngle);

示例代码和演示：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.strokeStyle=“红色”；
变量点1={
x:20，
y:20
};
变量点2={
x:40，
y:40
};
var PI2=数学PI*2；
var dx=point2.x-point1.x；
var dy=point2.y-point1.y；
var弧度角=数学常数2（dy，dx）；
var desiredLength=150；
var x=点1.x+所需长度*数学cos（弧度角）；
变量y=点1.y+期望长度*数学sin（弧度角）；
ctx.beginPath（）；
弧（点1.x，点1.y，5,0，PI2）；
ctx.closePath（）；
弧（点2.x，点2.y，5,0，PI2）；
ctx.closePath（）；
ctx.fill（）；
ctx.beginPath（）；
移动到（点1.x，点1.y）；
ctx.lineTo（x，y）；
ctx.stroke（）；
}); // end$（函数（）{}）；

你能发布一个小提琴链接吗？不，可能是正确的不，太陡了。请看我更新的图片，你的建议非常好，只是在我的情况下，角度是颠倒的

<!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; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

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

    var point1 = {
        x: 20,
        y: 20
    };

    var point2 = {
        x: 40,
        y: 40
    };

    var PI2=Math.PI*2;

    var dx=point2.x-point1.x;
    var dy=point2.y-point1.y;
    var radianAngle=Math.atan2(dy,dx);
    var desiredLength=150;

    var x=point1.x+desiredLength*Math.cos(radianAngle);
    var y=point1.y+desiredLength*Math.sin(radianAngle);


    ctx.beginPath();
    ctx.arc(point1.x,point1.y,5,0,PI2);
    ctx.closePath();
    ctx.arc(point2.x,point2.y,5,0,PI2);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(point1.x,point1.y);
    ctx.lineTo(x,y);
    ctx.stroke();

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>