(C)WorldWideSoftware 

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>擬似ラスタースクロール</title>
 </head>
 <body>
  <canvas id="bg" width="480" height="480"></canvas><br>
  <a href="http://www.wwsft.com">(C)WorldWideSoftware</a><br>
【説明】<br>
ファミコンなどの旧ハードで使われていたラスタースクロール風の演出です<br>
現在のハードにはラスタースクロールさせる機能はありませんが、三角関数などで実現できます<br>
<a href="rs00src.html">ソースコードの確認</a><br>
<a href="http://www.wwsft.com/ohq/">画像は無料RPG「One Hour Quest」のものです</a>

  <script>
  //描画面（キャンバス）の準備
  var cvs = document.getElementById("bg");
  var ctx = cvs.getContext("2d");

  //画像の読み込み
  var img = [], iOK = [];
  function loadImg( n, fname ) {
   iOK[n] = false;
   img[n] = new Image();
   img[n].src = fname;
   img[n].onload = function() { iOK[n] = true; }
  }

  loadImg( 0, "bg0.png" );
  loadImg( 1, "bg1.png" );

  //メイン処理
  var idx = 0;
  var tmr = 0;
  var bg = 0;//どちらの画像を表示するか

  window.onload = mainProc();
  function mainProc() {
   var x, y;
   tmr ++;

   switch(idx) {

   case 0://停止画面
   if(iOK[bg] == true) ctx.drawImage(img[bg], 0, 0);
   if(tmr == 60) {
    idx = 1;
    tmr = 0;
   }
   break;

   case 1://演出前半
   for(y=0; y<480; y+=8) {
    x = parseInt( 4*tmr*Math.cos(Math.PI*(y*2+tmr*8)/360) );//振幅を計算する
    ctx.drawImage(img[bg], 0, y, 480, 8, x, y, 480, 8);
   }
   ctx.fillStyle = "rgba(0,0,0," + tmr/100 + ")";//黒を重ね画面を暗くしていく(最初は薄い黒→徐々に濃い黒をアルファ値で設定)
   ctx.fillRect(0,0,480,480);
   if(tmr == 100) {
    idx = 2;
    tmr = 0;
    bg = 1-bg;//画像番号を切り替える
   }
   break;

   case 2://演出後半
   for(y=0; y<480; y+=8) {
    x = parseInt( 4*(100-tmr)*Math.cos(Math.PI*(y*2+(100-tmr)*8)/360) );//振幅を計算する
    ctx.drawImage(img[bg], 0, y, 480, 8, x, y, 480, 8);
   }
   ctx.fillStyle = "rgba(0,0,0," + (100-tmr)/100 + ")";//濃い黒→徐々に薄い黒に
   ctx.fillRect(0,0,480,480);
   if(tmr == 100) {
    idx = 0;
    tmr = 0;
   }
   break;

   }

   setTimeout(mainProc, 34);
  }
  </script>
 </body>
</html>
←動作確認に戻る