画得很糟糕的画布

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">

我的控制台中打印的值似乎很好，但结果很糟糕。 这是结果的图片

右边的灰色方块是结果，红线是我想要的。 我甚至不知道为什么我得到一个正方形，因为我正在使用“stroke（）”。

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

Answer 1

将ctx.stroke（2）更改为ctx.stroke（），添加ctx.strokeStyle =“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();

Answer 2

几个方向：

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）确保画布覆盖所有屏幕，并在几个可见的html项目上使用getPosition和drawPoint对屏幕的各个部分进行简单的单元测试。

编辑：1）中提供的代码很好。如有疑问，请在此处查看此测试： http://jsbin.com/aDimoJI/1/ 在进一步前往任何地方之前，您必须能够在任何地方绘制积分 确保您的画布在此测试的其他所有内容之上，因此您必须处理此问题...