javascript - JavaScriptの問題のキャンバス

Question

ページの中央に動かせないキャンバスオブジェクトを配置し、他のいくつかのオブジェクトを接続する方法があるのではないかと思っていましたが、移動可能です。

Answer 1

「移動可能なオブジェクトに線で接続するページの中央にあるメインオブジェクト」以外に何もする必要がないので、私ができる最善の方法は、Mozilla Firefox で線を描画する方法を示すこの SO の回答にリンクすることです。

関数 (リンクの腐敗の場合) は次のとおりです。

function DrawLine(x1, y1, x2, y2){

if(y1 < y2){
    var pom = y1;
    y1 = y2;
    y2 = pom;
    pom = x1;
    x1 = x2;
    x2 = pom;
}

var a = Math.abs(x1-x2);
var b = Math.abs(y1-y2);
var c;
var sx = (x1+x2)/2 ;
var sy = (y1+y2)/2 ;
var width = Math.sqrt(a*a + b*b ) ;
var x = sx - width/2;
var y = sy;

a = width / 2;

c = Math.abs(sx-x);

b = Math.sqrt(Math.abs(x1-x)*Math.abs(x1-x)+Math.abs(y1-y)*Math.abs(y1-y) );

var cosb = (b*b - a*a - c*c) / (2*a*c);
var rad = Math.acos(cosb);
var deg = (rad*180)/Math.PI

htmlns = "http://www.w3.org/1999/xhtml";
div = document.createElementNS(htmlns, "div");
div.setAttribute('style','border:1px solid black;width:'+width+'px;height:0px;-moz-transform:rotate('+deg+'deg);position:absolute;top:'+y+'px;left:'+x+'px;');   

document.getElementById("myElement").appendChild(div);

}

この関数は @madox2 によって作成され、変換された要素を作成することによって機能します。彼のコードを拡張して Webkit ブラウザーも含め、IE が追加を決定したときに CSS3 機能を追加することができます。

他に何もすることがないので、これが私があなたを助けるためにできる最善のことです.