Javascript画布使用算法绘制线的奇怪行为

Question

There are plenty of examples on how to draw lines on canvas, in js.

But for only educational purposes i want to draw line using algorithm. basically method gets two Vector2 points, from them it finds middle point, then it continues like that recursively until minimum distance of 2 pixels is reached.

I have DrawPoint method to basically draw 1 point on canvas, and DrawLine method that does all the job.

For now I have 2 problems:

1: points are not colored red, as they should be.

2:

It doesnt look like a line.

For Vector2 i used "Victor.js" plugin, and it seems to be working well.

this is code i have:

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

I really appreciate any help you can provide.

Answer 1

The victor.js documentation shows that most functions of Victors do not return new Victors, but operate on the current instance. In a way, v1.add(v2) is semantically more like v1 += v2 and not v1 + v2 .

The problem is with calculating the midpoint. You could use the mix() method, which blends two vectors with a weight. You must clone() the Victor first, otherwise point0 will be midofied:

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

If you don't change the original Vectors, you don't need to create new instances of Victors from the arguments, you can use the arguments directly:

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

Finally, as Sven the Surfer has already said in a comment, "FF0000" isn't a valid colour. Use "#FF0000" , note the hash mark, or one of the named web colours such as "crimson" .