我正在使用普通的 html/javascript Canvas (无库)。我有一种从两点计算 Angular 方法，我的理论是，我获取 Angular 并通过循环所需的水平距离 (x) 并对该 Angular 进行一些计算，使其保持笔直 (y)，在该 Angular 上画一条线，我只能在谷歌上找到有关复杂曲线和圆形线的内容。在每个循环中，我都会自行* Angular 吗？我不太擅长可视化数字
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 回答后，事情看起来颠倒了，但好多了......
光线直线显示了两点的波浪线 Angular ，但 Angular 有些翻转......我正在努力理解这一点
看起来我忘记了犯罪...
最佳答案
您可以使用三 Angular 函数计算沿包括点 1 和点 2 在内的直线指定长度处的 x、y。
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);
示例代码和演示:http://jsfiddle.net/m1erickson/sztC8/
<!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>
关于javascript - Canvas 直线 ctx.lineTo 的轨迹(y Angular )和(x 到所需长度)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25035738/