javascript - Canvas 画得不好

Question

我想画一条从给定点开始并穿过其他两个点的线。为此，我获取这些点的 x 和 y 坐标，然后进行绘制。这就是我的代码应该做的:

JS:

function getPosition(element)
{
    var left = 0;
    var top = 0;
    var e = document.getElementById(element);
    while (e.offsetParent != undefined && e.offsetParent != null)
    {
        left += e.offsetLeft + (e.clientLeft != null ? e.clientLeft : 0);
        top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0);
        e = e.offsetParent;
    }
    return new Array(left,top);
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var point1 = getPosition('firstGalaxy');
var point2 = getPosition('secondGalaxy');
var point3 = getPosition('lastGalaxy');
console.log(point1);
console.log(point2);
console.log(point3);
ctx.beginPath();
ctx.moveTo(point1[0], point1[1]);
ctx.lineTo(point2[0], point2[1]);
ctx.lineTo(point3[0], point3[1]);
ctx.stroke(2);
ctx.closePath();

HTML:

<canvas id="myCanvas" style="position:absolute;" class="constellation">

我的控制台中打印的值似乎不错，但结果却一团糟。这是结果图片

右边的灰色方 block 是结果，红线是我想要得到的。我什至不知道为什么我会得到一个正方形，因为我正在使用“中风()”。

谁能告诉我我的代码有什么问题吗？

Answer 1

将 ctx.lines(2) 更改为 ctx.lines()，添加 ctx.linesStyle="red"来更改线条的颜色。并且，添加</canvas>到 HTML。

HTML:

<canvas id="myCanvas" style="position:absolute;" class="constellation"></canvas>

Javascript:

function getPosition(element)
{
    var left = 0;
    var top = 0;
    var e = document.getElementById(element);
    while (e.offsetParent != undefined && e.offsetParent != null)
    {
        left += e.offsetLeft + (e.clientLeft != null ? e.clientLeft : 0);
        top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0);
        e = e.offsetParent;
    }
    return new Array(left,top);
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var point1 = getPosition('firstGalaxy');
var point2 = getPosition('secondGalaxy');
var point3 = getPosition('lastGalaxy');
console.log(point1);
console.log(point2);
console.log(point3);
ctx.beginPath();
ctx.moveTo(point1[0], point1[1]);
ctx.lineTo(point2[0], point2[1]);
ctx.lineTo(point3[0], point3[1]);
ctx.strokeStyle="red";
ctx.stroke();
ctx.closePath();