-1
私はいくつかのウェイポイントが表示されているマップのものに取り組んでいます。今では、タグを使って試してみるパスを示すために、単純なストロークで接続する必要があります。HTMLキャンバスが動作しません
キャンバスが設定されている場合、描画はパスを描画してストロークする位置を評価するjavascriptで行われます。問題は、キャンバスが表示されていないが、スクリプトで呼び出されたすべての関数が適切に記述され呼び出されていることです。
<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は次のとおり：
HTMLコードは、以下である
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があり、接続が連想配列であり、ID一意のIDです。
私は、キャンバスを他のタグの「上」のhtmlコードに配置すると、大きな空白が1つしかありませんが、図面はどちらも機能しません。あなたの助けのための
感謝:)
どのブラウザを使用しますか？ –
ストローク幅> 0を持つようにsvgをスタイル設定しましたか？ – RGB
それはswtブラウザで、html 5をサポートしていて、キャンバスのストロークは一度しか働かなかった。 –