canvasを使ってみる（2)；しかも立体

メモです。しかも試験中、しかも、、、立体！

並行法による両眼立体視練習

canvas試験、しかも立体（並行法）
 

立体と言ってもcanvasが将来用意するであろう3d-APIを使うのではありません。
HTML5/canvasを使ってみる のサンプルが面白味に欠けるので、並行法による立体にしてみました。 立体視の練習用の画像を [立体視練習] ボタンで出すことができます。
canvasの試験という意味では透過度指定が追加されています。

IE9の互換表示モード([ツール]-[互換表示])ではココログの画面内にcanvasを表示できません。 次のリンクで別窓にcanvas動画を得ることができます。 "../../../html/usecanvas2_sub.htm"

画像は、 環が迫ってくるようになっています。迫る速度は 近づくにつれて落としています。計算を単純にしていることも ありますが、当初まじめに作ったらかなり圧迫感が あったのでこの形にしました。 線の幅を変えるなどの処置も全く行っていません。 こんな程度で 立体に見えます（見えない人には見えないかも）。

コードを示します。

<--[if lt IE 9]>
<script type="text/javascript" src="../../../js/excanvas.js"></script>
<![endif]-->
<center id=douga> <!-- centerは不滅です　-->
canvas試験、しかも立体（並行法）<br>
<canvas id="canvas1" width="492" height="270" style="background-color:black"></canvas>
</center>
<script type="text/javascript">
var context;
var colors=[
   "255,0,0"    ,"0,255,0","128,128,255","255,255,0","0,255,255","255,0,255",
   "255,136,136","136,255,136","136,136,255","255,255,136","136,255,255","255,136,255"
   ];
function Circle(){ //========= 広がる色の環クラス ===========
   this.z    = 0;
   this.size = 0;
   this.color= colors[Math.floor(Math.random()*1000)%colors.length];
   }
Circle.prototype.drawOne = function(x,y,w,z,siten,shift,p){
   context.save();    // おまじない
   context.beginPath();            // 線指定（これがないと塗りになる）
   context.strokeStyle= "rgba("+this.color+","+p+")"; // 線色指定
   context.lineWidth  =w;          // 線幅指定
   var xx =x+(x-siten)*(z-0.5)/0.5;// 視差演算
   context.arc(xx+shift,y,this.size,0,Math.PI*2,false); // 円弧指定
   context.stroke();               // 線描画
   context.restore(); // おまじない
   }
Circle.prototype.draw = function(x,y,w,z,p){ // 描画/サイズup
   ++this.size;
   this.drawOne(x,y,w,z,103,0,p);
   this.drawOne(x,y,w,z,143,246,p);
   if( x>143 )     this.drawOne(x,y,w,z,63,-246,p);
   else if( x<103) this.drawOne(x,y,w,z,183,492,p);
   }
function Hamon(w,h,z,zd){  //========= 複数の環からなるクラス =========
   this.circles= Array();
   this.tics   = 0;
   this.x      = Math.floor(Math.random()*(w-60))+30;// 中心位置x
   this.y      = Math.floor(Math.random()*(h-80))+40;// 中心位置y
   this.z      = z;
   this.zd     = zd;
   this.yd     = Math.random()*7-3;
   }
Hamon.prototype.draw= function(){ // 描画/最大サイズを超えた環は消去
   if( (this.circles.length<4)&&(this.tics%5==0) ){ // 5tic毎に環生成、最大4個
      this.circles.push(new Circle());
      }
   this.z += this.zd;
   this.y += this.yd;
   ++this.tics;
   var p=1.0;
   if( this.tics>54 ) p= (60-this.tics)/6; // 透明度
   for(var i=0;i<this.circles.length;i++){
      this.circles[i].draw(this.x,this.y,2,this.z,p);// 中心位置と幅指定で描画
      }
   }
var arc  = -1.57;
var hamons=Array();
function draw(){ // 繰り返し呼ばれ波紋を描画する関数
   context= document.getElementById('canvas1').getContext('2d');
   arc += 0.01;  // 増減周期指定：(6.26/n)/15 秒で１周期となる。0.01では約10秒
   if( ( hamons.length<=2 )
       || (Math.random()*1000)<(Math.sin(arc)*60+200) ){//波紋生成割合制御
      hamons.push(new Hamon(246,270,0.5,0.01));
      }
   // context.clearRect(0,0,492,270); Android版ChromeではclearRectにはバグあり
   context.fillStyle="#000000";   // 背景色の黒と同じ色
   context.fillRect(0,0,492,270); // 背景色にする代わりに塗りつぶす
   for(var i=hamons.length-1;i>=0;--i){ // 新しい環（奥の環）から順
      hamons[i].draw();
      }
   while( hamons.length>0 ){
      if( hamons[0].tics<60 ) break;
      hamons.shift();                   // 最大時間を超えた波紋削除
      }
   }
function start(){
   //context= document.getElementById('canvas1').getContext('2d');
   setInterval(draw,67); // 指定間隔で関数呼び出し。67は1/15秒を示す
   }
try{ // load完了で関数呼び出し
   window.addEventListener("load",start(),false);
   }
catch(e){
   window.attachEvent("onload",start);
   }
</script>

なお、Operaが途中でCPU使用率100%になり完全に固まっていましたが、余計な context.save()が入っている本記述のバグでした。とはいえ、他のブラウザ では問題無く動いていました。

 ＃＃＃

ココログ＋IE9(互換モード）では恐らくexcanvas.jsとの関連でIE9が固まって しまうことが分かりました。IE9は本当に固まりやすいブラウザ で他のサイトでも結構固まります。
canvas表示を<iframe>に入れることで固まることだけは 回避できました。

 Android版Chromeのバグ対応 2014/1/11

残念ながらAndroid版ChromeのcanvasにはバグがありclearRectでは 背景色になりません。
黒で塗りつぶす形にしました。
HTML5で用意されるものはデタラメなものだらけです。やっぱりFlashがいい