-1

我正在研究显示几个航点的地图。现在它们应该用一个简单的笔划连接以显示我尝试使用标签的路径。

画布已设置好，绘制发生在 javascript 中，该 javascript 评估绘制位置的位置并描边路径。问题是画布没有显示，但脚本中调用的所有函数都正确编写和调用。

html代码如下：

<body>
    <div id="controller">
        <div id="zeichenfenster">
            <span id="maps"></span>
            <span id="objects"></span>
            <canvas id="canvas" height="1000px" width="2000px"></canvas>
        </div>
    </div>
</body>

...这是javascript：

function connectDrawables(drawable1, drawable2, id) {

    connections[id] = "" + drawable1 + "|" + drawable2;

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 2000, 1000);
    ctx.lineWidth = 5.0;
    ctx.lineCap = "round";
    ctx.strokeStyle = "#FFFFFF";

    for(var k in connections) {

            var string = connections[k];
            var sub = string.split("|");

            var element1 = document.getElementById(sub[0]);
            var element2 = document.getElementById(sub[1]);

            var x1 = 0.0 + parseFloat((element1.style.marginLeft).replace("px", "")) + 8;
            var y1 = 0.0 + parseFloat((element1.style.marginTop).replace("px", "")) + 7;
            var x2 = 0.0 + parseFloat((element2.style.marginLeft).replace("px", "")) + 5;
            var y2 = 0.0 + parseFloat((element2.style.marginTop).replace("px", "")) + 4;                
            //alert("ID: " + id + "\nElement1: " + drawable1 + " x1: " + x1 + " y1: " + y1 + "\nElement2: " + drawable2 + " x2: " + x2 + " y2: " + y2);

            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

    }

}

drawable1 和 2 是航点的 id，connections 是一个关联数组，id 是唯一的 id。

如果我将画布放在其他标签“上方”的 html 代码中，则只有一个很大的空白区域，但绘图也不起作用。

谢谢你的帮助 ：）

4

1 回答 1

1

最后“ctx.closePath()”呢？

        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        ctx.closePath();
于 2012-04-18T18:24:50.403 回答