5

おそらくもっと数学の質問ですが、ここに行きます...

私がやりたいのは、背景キャンバス上のアニメーション線で接続される2つのHTML要素です。

これが私がやりたいことの単純化されたバージョンのフィドルです。

http://jsfiddle.net/loupax/zUqXn/

線は実際にはそこにありますが、キャンバスの外側にあり、要素インスペクターを使用すると、キャンバスに描かれた線の座標を確認できます。誰かが私が間違っていることについて私を助けてくれて、線が場違いになってしまいますか?

これは、線が引かれているが、位置がずれていることの証拠です。(流体ステージとキャンバスサイズを固定寸法に置き換えました)

http://jsfiddle.net/loupax/zUqXn/8/

編集私がやろうとしていることは、流動的なレイアウトでは不可能のようです。多くのトラブルの後、Canvas要素はそれ自体の平面であり、アンカー座標を固定サイズのないキャンバス座標と一致させる安全な方法がないことがわかりました。

4

1 に答える 1

3

線の置き忘れの理由を見つけました。

キャンバスのCSSの幅と高さは、canvas要素の実際の幅と高さとは完全に異なるようです。したがって、HTML要素の座標をCanvas要素の線の座標と一致させたい場合は、それを含むdivに固定幅を設定し、要素に直接同じ固定の幅と高さを設定する必要があります。

修正された例を次に示します。

http://jsfiddle.net/loupax/zUqXn/29/

于 2012-08-05T12:21:37.133 に答える