Javascript画布使用算法画线奇怪的行为答案

【问题标题】：Javascript canvas draw line strange behavior using algorithmJavascript画布使用算法画线奇怪的行为
【发布时间】：2018-02-10 21:47:36
【问题描述】：

有很多关于如何在画布上画线的例子，在 js 中。

但仅出于教育目的，我想使用算法画线。基本上方法获取两个 Vector2 点，从中找到中间点，然后递归地继续下去，直到达到 2 个像素的最小距离。

我有 DrawPoint 方法基本上可以在画布上绘制 1 个点，而 DrawLine 方法可以完成所有工作。

目前我有两个问题：

1：点不是应该的红色。

2：

它看起来不像一条线。

对于 Vector2，我使用了 "Victor.js" 插件，它似乎运行良好。

这是我的代码：

JS：

var point2 = new Victor(100, 100);
var point3 = new Victor(150, 150);

DrawLine(point2, point3);

function DrawLine(vec0, vec1)
{
    var point0 = new Victor(vec0.x, vec0.y);
    var point1 = new Victor(vec1.x, vec1.y);

var dist = point1.distance(point0);

if (dist < 2)
    return;


//this is how it should look like in c# var middlePoint = point0 + (point1 - point0)/2; But looks like i cant just divide by 2 using victor js because i can only divide vector by vector. 
    var middlePoint = point0.add(point1.subtract(point0).divide(new Victor(2,2)));


DrawPoint(middlePoint);

DrawLine(point0, middlePoint);
DrawLine(middlePoint, point1);
}

function DrawPoint(point){
    var c = document.getElementById("screen");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "FF0000";
    ctx.fillRect(point.x, point.y, 3,1); 
}

非常感谢您提供的任何帮助。

【问题讨论】：

它有点像一条线，你还需要一个有效的颜色 -> #FF0000
为什么不只是middlePoint = (point0 + point1) / 2？
@meowgoesthedog 因为看起来它不起作用。对于减法和加法，这个插件有自己的方法，以及除法。

标签： javascript algorithm canvas

【解决方案1】：

victor.js 文档显示 Victors 的大多数函数不会返回新的 Victors，而是对当前实例进行操作。在某种程度上，v1.add(v2) 在语义上更像v1 += v2 而不是v1 + v2。

问题在于计算中点。您可以使用mix() 方法，该方法将两个向量与权重混合。你必须先clone() Victor，否则point0将被淘汰：

var middlePoint = point0.clone().mix(point1, 0.5);

如果你不改变原来的Vectors，你不需要从参数创建新的Victors实例，你可以直接使用参数：

function DrawLine(point0, point1)
{
    var dist = point1.distance(point0);

    if (dist < 2) return;

    var middlePoint = point0.clone().mix(point1, 0.5);

    DrawPoint(middlePoint);

    DrawLine(point0, middlePoint);
    DrawLine(middlePoint, point1);
}

最后，正如冲浪者 Sven 在评论中所说，"FF0000" 不是有效颜色。使用"#FF0000"，注意井号，或named web colours 之一，例如"crimson"。

【讨论】：