| ポイント |
<![CDATA[
myLine.from = x1+","+y1;
myLine.to = x2+","+y2;
<v:line id="myLine" style="position: absolute;" strokecolor="black" strokeweight="2pt">
<v:stroke dashstyle="solid" />
</v:line>
]]>
|
| 説 明 |
VMLを使えばvmlで書かれた図形をJavaScriptで制御することができます。線は「VMLオブジェクト名.form」「VMLオブジェクト名.to」にX,Y座標を指定します。指定する値は「X座標値,Y座標値」となります。,も連結して指定しないと正常に動作しません。 |
| サンプル |
<![CDATA[
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>線を描画する(VML)</title>
<style type="text/css">
v\:* { behavior: url(#default#VML); }
</style>
<script language="JavaScript"><!--
x1 = 0;
y1 = 0;
x2 = 0;
y2 = 200;
dx = 2;
function drawLine(){
myLine.from = x1+","+y1;
myLine.to = x2+","+y2;
x2 += dx;
if ((x2 < 0) || (x2 > document.body.clientWidth)) dx = -dx;
setTimeout("drawLine()",200);
}
// --></script>
</head>
<body onLoad="drawLine()">
<v:line id="myLine" style="position: absolute;" strokecolor="black" strokeweight="2pt">
<v:stroke dashstyle="solid" />
</v:line>
</body>
</html>
]]>
|
| 補足説明 |
IE5.0でも動作しますが、期待通りにならない場合があります。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
線を描画する(VML)