使用算法的Javascript画布画出奇怪的行为

有很多关于如何在画布上绘制线条的例子，在js中。使用算法的Javascript画布画出奇怪的行为

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

我有DrawPoint方法基本上在画布上画出1个点，DrawLine方法完成所有工作。

现在我有2个问题：

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); 
}

我真的很感激任何帮助，您可以提供。

来源

2017-09-01 Nick

它看起来像一条线，也需要一个有效的颜色 - >'＃FF0000' –

为什么不只是'middlePoint =（point0 + point1）/ 2'？ – meowgoesthedog

@meowgoesthedog因为看起来不起作用。对于减法和增加，这个插件有自己的方法，也适用于分区。 – Nick

victor.js文档显示Victors的大部分功能不会返回新的Victors，而是在当前实例上运行。在某种意义上，v1.add(v2)在语义上更像是v1 += v2而不是v1 + v2。

问题在于计算中点。您可以使用mix()方法，它将两个向量与一个权重相混合。你必须先clone()的胜者，否则point0将midofied：

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

如果不改变原有的载体，你不需要从参数创建无葬身之地的新实例，您可以使用参数直接：

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); 
}

最后，斯文的冲浪者已经在评论已经说了，"FF0000"不是有效的颜色。使用"#FF0000"，注意散列标记或named web colours之一，如"crimson"。

来源

2017-09-01 20:32:13

使用算法的Javascript画布画出奇怪的行为

回答

相关问题