HTML5/canvasを使ってみる: 万象酔歩

HTML5/canvasを使ってみる

メモです。しかも試験中。しかも、もう少し面白味のある試験を canvasを使ってみる（2)；しかも立体に置きました。

上の動画はHTML5で策定中のcanvas機能で出力しています。

残念ながら IE8にはcanvasが実装されておらず、excanvas.jsというJavascript ライブラリで機能を実現しています。そのため必ずしも十分な速度は得られません。
IE9でcanvasが実装されましたがでIE9の機能を使うためにはmeta記述で
http-equiv="X-UA-Compatible" content="IE=edge"
を宣言する必要があります。
IE9で互換表示モード([ツール]-[互換表示]）にするとexcanvas動作で固まることが分かりました。iframeに入れると絵こそ得られませんが固まってしまうことがないことも分かりましたので、安全のため canvasをiframeに入れています。通常はiframeに入れる必要はありません。

現在IE9の互換表示モードではココログの画面内にcanvasを表示できませんが、次のリンクで別窓にcanvas動画を得ることができます。 "../../../html/usecanvas_sub.htm"

canvas用のHTML記述は以下のようになっています。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--[if lt IE 9]>
<script type="text/javascript" src="../../../js/excanvas.js"></script>
<![endif]-->
<center> <!-- centerは不滅です　-->
<canvas id="canvas1" width="480" height="270"
         style="background-color:black"></canvas>
</center>
<script type="text/javascript">
var context;
var colors=[
   "#FF0000","#00FF00","#8080FF","#FFFF00","#00FFFF","#FF00FF",
   "#FF8888","#88FF88","#8888FF","#FFFF88","#88FFFF","#FF88FF"
   ];
function Circle(){ //========= 広がる色の環クラス ===========
   this.size = 0;
   this.color= colors[Math.floor(Math.random()*1000)%colors.length];
   }
Circle.prototype.draw = function(x,y,w){ // 描画/サイズup
   context.save();    // おまじない
   context.beginPath();            // 線指定（これがないと塗りになる）
   context.strokeStyle=this.color; // 線色指定
   context.lineWidth  =w;          // 線幅指定
   context.arc(x,y,++this.size,0,Math.PI*2,false); // 円弧指定
   context.stroke();               // 線描画
   context.restore(); // おまじない
   }
function Hamon(w,h){  //========= 複数の環からなるクラス =========
   this.circles= Array();
   this.tics   = 0;
   this.x      = Math.floor(Math.random()*w);// 中心位置x
   this.y      = Math.floor(Math.random()*h);// 中心位置y
   }
Hamon.prototype.draw= function(){ // 描画/最大サイズを超えた環は消去
   if( (this.tics<20)&&(this.tics%5==0) ){ // 最初の20回の内4回で環生成
      this.circles.push(new Circle());
      }
   ++this.tics;
   for(var i=0;i<this.circles.length;++i){
      this.circles[i].draw(this.x,this.y,2);// 中心位置と幅指定で描画
      }
   while( this.circles.length>0 ){
      if( this.circles[0].size<50 ) break; // 50:環の最大サイズ
      this.circles.shift();                // 環を消去
      }
   }
var arc  = 0;
var hamons=Array();
function draw(){ // 繰り返し呼ばれ波紋を描画する関数
   context= document.getElementById('canvas1').getContext('2d');
   arc += 0.01;  // 増減周期指定：(6.26/n)/15 秒で１周期となる。0.01では約10秒
   if( (Math.random()*1000)<(Math.sin(arc)*250+300) ){//波紋生成割合制御
      hamons.push(new Hamon(480,270));
      }
   // context.clearRect(0,0,480,270); Android版ChromeではclearRectにはバグあり
   context.fillStyle="#000000";   // 背景色の黒と同じ色
   context.fillRect(0,0,480,270); // 背景色にする代わりに塗りつぶす
   for(var i=0;i<hamons.length;++i){
      hamons[i].draw();
      }
   while( hamons.length>0 ){
      if( hamons[0].circles.length!=0 ) 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>
</body>
</html>

iframe記述は次の様になっています。

<center><!-- centerが使えないならHTML5には反対です -->
<iframe src="../../../html/usecanvas_sub.htm" frameborder="0" 
        width="490" height="300">
</iframe>
</center>

とりあえず「canvasを使ってみた」だけです。canvasの有用な使い方からは外れたものです。説明は近々追加。

ブラウザ毎の差が大きいので、とりあえずノートＰＣでのCPU使用率グラフを載せます。考察はその内。なお、GoogleChromeは一見良い値で動いているように見えますが、しばらく動くと、CPU100%使用でピタッと動かなくなり少しするとまた動きだします。operaが一番安定しているようです。 Flashで同等のものを作成し動かした例も載せます。基本的にはFlashが最も軽く安定しているようです。このような作業にはcanvasはとにかく重く不安定というのが印象です。