画布：继续 lineTo 路径但 x 固定答案

【问题标题】：Canvas: Continue lineTo path but with x fixed画布：继续 lineTo 路径但 x 固定
【发布时间】：2014-11-09 06:36:54
【问题描述】：

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

【问题讨论】：

你试过增加画布的高度吗？ :-)

标签： javascript html5-canvas

【解决方案1】：

您可以使用斜率截距公式将您的线延伸到所需的 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>

【讨论】：