使用算法的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畫布畫出奇怪的行爲

回答

相關問題