◆CANVASでパラパラ動画作成時の注意

 CANVASは画像ロード完了前に処理関数を呼んではならない

HTML5+CANVASに画像を出す場合、ロード時間を無視してはなりません。

ロードが完了しない時点で続けて画像表示drawImage()を呼ぶと、殆ど 固まった状態となります。

通常一定時間で画像を表示するにはsetInterval()を用いますが 重く遅く無能なCANVASを用いる場合はこの手法を使ってはなりません。

ImageのonLoadイベントでdrawImage()を呼び、次の出力のタイマー設定を 行います。

前の記事 ◆多摩川の河岸段丘を走って実感する のパラパラ動画は次のコードで実現しています。

<center> <!-- centerは不滅です -->
<canvas id='canvas1' width='495' height='780' ></canvas>
</center>
<script type="text/javascript">
var dir    ="http://k-hiura.cocolog-nifty.com/image_15_07_/";
var img    = new Image();
var srcs   = [
   'DQ_01.png'
  ,'DQ_02.png'
  ,'DQ_03.png'
  ,'DQ_04.png'
  ,'DQ_05.png'
  ,'DQ_0501.png'
  ,'DQ_06.png'
  ,'DQ_0601.png'
  ,'DQ_07.png'
  ,'DQ_08.png'
  ,'DQ_0901.png'
  ,'DQ_0801.png'
  ,'DQ_09.png'
  ,'DQ_10.png'
  ,'DQ_11.png'
  ,'DQ_12.png'
   ];
var idx= -1;
function draw(){
   canvas = document.getElementById('canvas1');// 毎回取り直すのが安全
   context= canvas.getContext('2d');// 毎回取り直すのが安全
   ++idx;
   if( idx>=srcs.length ) idx=0;
   img.src   = dir+srcs[idx];
   img.onload=function(){
      context.drawImage(img
                    ,0  
                    ,-50 
                    ,495 
                    ,830 
                    );
      setTimeout(draw,1500);//画像のロード完で繰り返す
      }
   }
function start(){
   draw();
   //setInterval(draw,1500); やってはならない
   }
try{ // load完了で関数呼び出し
   window.addEventListener("load",start,false);
   }
catch(e){
   window.attachEvent("onload",start);
   }
</script>

次の画像が出ます。

 ＃＃＃

HTML5+CANVASはかつてのFlashに比べ、圧倒的に表現力が劣るだけでなく 重く遅いものです。

Flash全盛期は鬱陶しい程賑やかに画像が動き回るサイトが多く辟易したもの ですが、HTML5+CANVASの時代になり、そのようなサイトは無くなりました。

それはとりもなおさず、Flashが扱いやすく、表現力が高く、速くて軽い 優れたもので、デザイナー達が「ちょっとやりすぎ」な程腕を振るったと いうことなのです。

かつての「FLASH職人」のような 「CANVAS職人」が出て 無能で重く遅いHTML5+CANVASを使い倒すことができるようになるでしょうか？

HTML5は基本的にWEBを無能で扱いづらいものにして、その代わりとなる アプリのストアで世界征服を果たそうとする教祖様とその信者達、 そしてそれを真似て儲けようとする金儲け主義者によって 推し進められたものです。
（ちなみに、金儲け主義は世界征服の夢に比べはるかに健全だとは 思っています)
残念ながらWEBでのマルチメディア表示は死んだと思っていいのかも しれません。
なんとか甦ることを期待はしているのですが。。。

FlashをCANVASに置き換えることが進まず、WEB世界がどんどん貧しくなっていっていることを 「意識が低い」と嘆く人がいますが、 「画を書いてタイムラインに張り付けてツイーンでアニメ化する」といったことがCANVASでできるでしょうか？
現時点のHTML5+CANVASでは不可能です。
デザイナー達の意識が低いのではなく、HTML5+CANVASはあまりにも原始的すぎて全くFlashの代わりになる レベルではないのです。こんな低レベルの環境ではデザイナーの創造力が発揮されることはありません。