liguofeng29’s blog

個人勉強用ブログだっす。

HTML5のcanvas要素 - 座標システムと経路を使い雪落下を実現する

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> 雪効果 </title>
</head>
<body>
<h2> 雪効果サンプル </h2>
<canvas id="canvas" width="420" height="280"
    style="border:1px solid black"></canvas>
<script type="text/javascript">
   // 雪
   function createFlower(context, n, dx, dy, size, length)
   {
       // 経路開始
       context.beginPath(); 
       context.moveTo(dx, dy + size);
       var dig = 2 * Math.PI / n;
       for(var i = 1; i < n + 1 ; i++) 
       {
           // 制御座標
           var ctrlX = Math.sin((i - 0.5) * dig) * length + dx;
           var ctrlY= Math.cos((i - 0.5 ) * dig) * length + dy;
           // 終了座標
           var x = Math.sin(i * dig) * size + dx;
           var y = Math.cos(i * dig) * size + dy; 
           // 2次曲線
           context.quadraticCurveTo(ctrlX, ctrlY, x, y);
       }
       context.closePath();  
   }
   // 雪の初期位置
   snowPos = [
       {x : 20, y : 4},
       {x : 60, y : 4},
       {x : 100, y : 4},
       {x : 140, y : 4},
       {x : 180, y : 4},
       {x : 220, y : 4},
       {x : 260, y : 4},
       {x : 300, y : 4},
       {x : 340, y : 4},
       {x : 380, y : 4}
   ];
   function fall(context)
   {
       // 背景色
       context.fillStyle = "#000";
       // 背景描く
       context.fillRect(0, 0, 420, 280);
       // 雪色
       context.fillStyle = "#fff";
       for (var i = 0, len = snowPos.length ; i <len ; i++ )
       {
           // 保存
           context.save();
           // 座標移動
           context.translate(snowPos[i].x, snowPos[i].y);
           // 座標回転
           context.rotate((Math.random() * 6 - 3 ) * Math.PI / 10);
           // 雪落下
           snowPos[i].y += Math.random() * 8;
           if (snowPos[i].y > 280)
           {
               snowPos[i].y = 4;
           }
           // 雪を描く
           createFlower(context, 6, 0, 0, 5, 8);
           context.fill();
           // リストア
           context.restore();
       }        
   }
   // canvas要素取得
   var canvas = document.getElementById('canvas');
   // CanvasRenderingContext2D取得
   var ctx = canvas.getContext('2d');
   // 落下スピード
   setInterval("fall(ctx);", 100);
</script>
</body>
</html>

f:id:liguofeng29:20160124193309g:plain