-1

私はいくつかのウェイポイントが表示されている地図に取り組んでいます。これで、タグを使用して試したパスを示すために、単純なストロークで接続する必要があります。

キャンバスが設定され、描画する場所の位置を評価してパスをストロークする 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コードに配置すると、大きな空白が1つだけになりますが、描画も機能しません。

ご協力いただきありがとうございます ：）

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 に答える