線を描画/移動する(DirectX)


動作ブラウザ 【 IE:4.0  NN:-
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × - × × × × × - × -
Macintosh × × × × - × × × × × - - ×
UNIX - - - - - × × × × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント myIMG.Translate(2,1,0); <object id="myIMG" classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6" style="position:absolute;width:320px;height:240px"> <param name="Line0001" value="SetLineColor(255,0,0)"> <param name="Line0002" value="SetLineStyle(1,1)"> <param name="Line0003" value="PolyLine(2,0,0,-320,-240)">
説  明 線を描画するにはobjectタグでDirectX (DirectAnimation)を指定しparamタグで必要なパラメータを指定します。線を描画する命令はないため、複数の線を描く(分割線描画)PolyLineを使います。最初の数値が座標の数で、以後x1,y1,x2,y2,..と指定した個数(x,yで1つ)だけ列記します。 線を移動させるには「オブジェクト名.Translate(dx,dy,dz)」を指定します。dx,dy,dzは、ぞれぞれXYZ座標の移動量です。座標は数学座標系になっているので注意が必要です。
サンプル <html> <head> <title>線を描画/移動する(DirectX)</title> <script language="JavaScript"><!-- function moveLine() { myIMG.Translate(2,1,0); } // --></script> </head> <body> <object id="myIMG" classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6" style="position:absolute;width:320px;height:240px"> <param name="Line0001" value="SetLineColor(255,0,0)"> <param name="Line0002" value="SetLineStyle(1,1)"> <param name="Line0003" value="PolyLine(2,0,0,-320,-240)"> </object> <a href="javaScript:moveLine()">線を移動させる</a> </body> </html>
補足説明 DirectAnimationに関してはhttp://www.microsoft.com/directx/dxm/help/da/oview/proguide_oview.htmを参照してください。

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA