- ベストアンサー
たくさんのBOXの描画
下記コードでは3個のBOXしかありませんが、1000個のBOX等の場合もっと効率のよい記述法はありませんか？ 本来したいことは、BOXを不特定個数、場所に描画させたいのですが。 HTMLでは最初の定義したBOXしか加工できないのでしょうか？ BasicやCみたいに、いきなりdrawLine()に描画はできませんか？ <HTML xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>test(VML)</title> <style type="text/css"> v\:* { behavior: url(#default#VML); } </style> <script language="JavaScript"><!-- //----------------------------------------------描画 function drawLine(){ switch(eval(document.test.set.value)){ case 1:box0.style.top=100;box0.style.left= 50;box0.style.width=30; box0.style.height=30; box1.style.top=110;box1.style.left=150;box1.style.width= 0; box1.style.height= 0; box2.style.top=120;box2.style.left=200;box2.style.width= 0; box2.style.height= 0;break; case 2:box0.style.top=100;box0.style.left= 50;box0.style.width=30; box0.style.height=30; box1.style.top=110;box1.style.left=150;box1.style.width=30; box1.style.height=30; box2.style.top=120;box2.style.left=200;box2.style.width= 0; box2.style.height= 0;break; case 3:box0.style.top=100;box0.style.left= 50;box0.style.width=30; box0.style.height=30; box1.style.top=110;box1.style.left=150;box1.style.width=30; box1.style.height=30; box2.style.top=120;box2.style.left=200;box2.style.width=30; box2.style.height=30;break; } } //---------------------------------------------- // --></script> </head> <body> <form name="test"> <script> //------------------------------------------------------------------- var i,ht =[]; i=0; ht[i] = '<select onChange="drawLine()" id="set">'; for( var i=1; i<4;) ht[i] = '<option value='+i+'>'+(i++)+'</option>'; ht[i] = '</select>'; document.write('個数 = ', ht.join(''),'<BR>'); //--------------------------------------------------------------------- </script> <v:rect id=box0 style="position:absolute;" fillcolor="#999966"></v:rect> <v:rect id=box1 style="position:absolute;" fillcolor="#999966"></v:rect> <v:rect id=box2 style="position:absolute;" fillcolor="#999966"></v:rect> </FORM> </body> </HTML>
- situmonnsya
- お礼率70% (374/532)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>Test</title> <style>v\:* { behavior: url(#default#VML); position:absolute;}</style> </head> <body> <script> function Test(){ var i=0; this.go = function(){ var x=400+Math.sin(i*3.14159/180)*i/10; var y=400-Math.cos(i*3.14159/180)*i/10; i+=10; box(x,y,10,10,'#cc88cc'); if(i<3600) setTimeout( (function(f_){ return function(){ f_.go.call(f_) }})(this) ,30); } this.go(); } new Test; function line(x,y,x2,y2,c){ document.body.insertAdjacentHTML( "BeforeEnd",'<v:line from="'+x+','+y+'" to="'+x2+','+y2+'" strokecolor="'+c+'"/>'); } function box(x,y,x2,y2,c){ document.body.insertAdjacentHTML( "BeforeEnd",'<v:rect style="top:'+y+'; left:'+x+'; width:'+x2+' ;height:'+y2+';" fillcolor="'+c+'">' ); } </script> </body> </html>
その他の回答 (1)
- t_netbug
- ベストアンサー率34% (15/44)
vmlやった事ないので壮絶に自信がないですが…。 <v:rect>タグに関しては以下のような感じで書けると思いますよ～。 <script> var body = document.getElementsByTagName('body').item(0); for(i=0;i<1000;i++){ var rect = document.createElement('v:rect'); // v:rectタグ生成 rect.setAttribute('fillcolor','#999966'); rect.setAttribute(...(省略) body.appendChild(rect); //bodyタグ内に追加 } alert(body.innerHTML); // デバッグ </script>
お礼
ありがとうございます。 残念ながら、私の技量ではご回答のサンプルをまだ理解できません。 今後の参考にさせて頂きます。
お礼
pipiさん、いつもありがとうございます。 お答え頂いたサンプル、やっと理解できました。 が、・・・描画した線、箱を消す方法がわかりません。 新しい質問に書かせて頂きますので、またよろしくお願いします。