Javascript 画得不好的帆布

我想画一条线，从一个给定点开始，穿过另外两个点。为此，我得到这些点的x和y坐标，然后我画。这是我的代码应该做的：

JS:

HTML:

我的控制台中打印的值看起来不错，但结果却是一团糟。 下面是结果的图片

右边的灰色正方形是结果，红线是我想要得到的。 我甚至不知道为什么我会得到一个正方形，因为我用的是笔划

---

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

将ctx.stroke2更改为ctx.stroke，添加ctx.strokeStyle=red以更改线条的颜色。并且，添加到HTML中

HTML:

几个方向：

1要进行调试，请使用以下方法绘制点，确保点位于正确的位置：

function drawPoint(ctx, pt, color, pointSize ) {
    ctx.fillStyle = color || '#F88';
    var pointSize = pointSize || 2;
    var x = pt[0], y=pt[1];
    ctx.fillRect(x - pointSize/2, y-pointSize/2, pointSize, pointSize);
}

2使用getBoundingClientRect检索具有最大可靠性的控制位置

function getPosition(element, provideCenter)
{
    var elementBoundingRect = element.getBoundingClientRect();
    var point = [elementBoundingRect.left, elementBoundingRect.top];
    if (provideCenter) {
        point[0] += (elementBoundingRect.right  - elementBoundingRect.left) /2;
        point[1] += (elementBoundingRect.bottom - elementBoundingRect.top ) /2;
    }
    return point;
}

3确保画布覆盖了所有屏幕，并使用getPosition和drawPoint对几个可见的html项目对屏幕的各个部分进行简单的单元测试

编辑：1中提供的代码很好。如果有疑问，请查看以下测试： 你必须能够在任何地方画点，然后再进一步。

---

确保您的画布位于此测试的所有其他内容之上，因此您必须处理此问题…

如果此操作仍然不起作用，可能是因为位置设置不正确。如果是这种情况，请发布所有代码。不需要getPosition函数。您可以使用获取元素位置的绝对值。谢谢。我尝试了你的两个功能。第一个没有在我的屏幕上画任何东西，但我真的认为我的坐标很好。由于我的视差系统，可能绘制的点隐藏在元素后面。第二个返回我的控制台中的错误：TypeError:element.getBoundingClientRect不是函数。为了让画布覆盖整个屏幕，我必须把我的整个页面都包含进去吗？我会继续测试，谢谢！

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

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

function drawPoint(ctx, pt, color, pointSize ) {
    ctx.fillStyle = color || '#F88';
    var pointSize = pointSize || 2;
    var x = pt[0], y=pt[1];
    ctx.fillRect(x - pointSize/2, y-pointSize/2, pointSize, pointSize);
}

function getPosition(element, provideCenter)
{
    var elementBoundingRect = element.getBoundingClientRect();
    var point = [elementBoundingRect.left, elementBoundingRect.top];
    if (provideCenter) {
        point[0] += (elementBoundingRect.right  - elementBoundingRect.left) /2;
        point[1] += (elementBoundingRect.bottom - elementBoundingRect.top ) /2;
    }
    return point;
}