Canvas:继续lineTo路径，但x已固定

Canvas: Continue lineTo path but with x fixed

本文关键字：继续 lineTo 路径 Canvas      更新时间：2023-09-26

http://jsfiddle.net/5xcbbqtL/5/

我正在用x，y点画两条线。然后我从第二行的开始和结束处取弧度。

当我尝试使用弧度来推断第二条线，使其更长时，我无法创建一条直线，因为我想移动到固定的x位置

其中

var radian=Math.atan2(endY-startY,endX-startX);
var y=endY+100*Math.sin(radian);
pen.lineTo(200,y);  // < problem

移动到一个固定的位置就像添加了一个倾斜效果。我如何正确地进行线路，但在'x'200 处停止

您可以使用斜率截距公式将您的线扩展到所需的X:

function extendToX(desiredX,x0,y0,x1,y1){
    var m=(y0-y1)/(x0-x1);
    var b=y1-(m*x1);
    return(m*desiredX+b);
}

示例代码和演示：http://jsfiddle.net/m1erickson/c2ba9d9y/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="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");
    var x0=25;
    var y0=50;
    var x1=150;
    var y1=150;
    ctx.beginPath();
    ctx.moveTo(x0,y0);
    ctx.lineTo(x1,y1);
    ctx.strokeStyle='blue';
    ctx.stroke();
    var newY=extendToX(200,x0,y0,x1,y1);
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(200,newY);
    ctx.strokeStyle='red';
    ctx.stroke();
    function extendToX(desiredX,x0,y0,x1,y1){
        var m=(y0-y1)/(x0-x1);
        var b=y1-(m*x1);
        return(m*desiredX+b);
    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Use slope-intercept formula to extend line</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
相关文章：