7-3 canvas飘雪(中)
本节编程练习不计算学习进度，请电脑登录imooc.com操作

canvas飘雪(中)

在canvas中调用一个content.arc的圆弧方法，我们就能画出一个雪球出来，同样的如果要有漫天飘雪的感觉那就需要大量的雪球，这里直接可以定义一个雪球类，通过类产生大量的雪球对象。

参考右边代码snowflake.js，定义了一个Snow的雪球类

//构建雪球
for (var i = 0; i < snowNumber; ++i) {
    new Snow();
}

通过循环new Snow产生多个雪球对象。每个雪球都有自己不同的形态、状态、属性。例如：雪球的透明度、x、y轴坐标、雪球的半径这些都是变化的，针对这样的处理这会有randomInRange随机算法用随机取值

function randomInRange(min, max) {
  var random = Math.random() * (max - min) + min;
   return random;
}

randomInRange方法比较简单，随机max - min的值，但是要保证要起点是min

例如：this.alpha 透明度，这里会在0.5到1之间取值

this.alpha = randomInRange(0.5,1);

雪球的的坐标需要注意，不能溢出当然的容易范围

this.x = (Math.random() * width);
this.y = (Math.random() * height);

这个很好理解，最大的取值不能超过容器范围

任务

index.htmlsnowflake.jscommon.csspageC.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>圣诞主题</title>
  7.     <link rel='stylesheet' href='common.css' />
  8.     <link rel="stylesheet" type="text/css" href="pageC.css">
  9. </head>
  10.  
  11. <body>
  12.     <section class="container">
  13.         <!-- 第一幅画面 -->
  14.         <section class="page-a bg-adaptive">
  15.         </section>
  16.         <!-- 第二幅画面 -->
  17.         <section class="page-b bg-adaptive">
  18.         </section>
  19.         <!-- 第三幅画面 -->
  20.         <section class="page-c bg-adaptive">
  21.             <!-- 窗户关闭 -->
  22.             <div class="window wood">
  23.                 <div class="window-content" data-attr="red">
  24.                     <div class="window-scene-bg"></div>
  25.                     <div class="window-close-bg"></div>
  26.                     <div class="window-left hover"></div>
  27.                     <div class="window-right hover"></div>
  28.                 </div>
  29.             </div>
  30.         </section>
  31.         <!-- 雪花 -->
  32.         <canvas id="snowflake"></canvas>
  33.     </section>
  34.     <script type="text/javascript">
  35.     var config = {};
  36.     //rem设置
  37.     (function(doc, win) {
  38.         var docEl = doc.documentElement,
  39.             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  40.             recalc = function() {
  41.                 var clientWidth = docEl.clientWidth;
  42.                 if (!clientWidth) return;
  43.                 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  44.                 //宽与高度
  45.                 document.body.style.height = clientWidth * (900 / 1440) + "px"
  46.                 config.clientWidth = clientWidth;
  47.                 config.clientHeight =  clientWidth * (900 / 1440)
  48.             };
  49.         win.addEventListener(resizeEvt, recalc, false);
  50.         doc.addEventListener('DOMContentLoaded', recalc, false);
  51.     })(document, window);
  52.     </script>
  53.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  54.     <script type="text/javascript" src="snowflake.js"></script>
  55. </body>
  56.  
  57. </html>
  58.  
  1. /**
  2.  * 雪花
  3.  * canvas版
  4.  */
  5. $(function() {
  6.  
  7.     var snowElement = document.getElementById("snowflake")
  8.     var canvasContext = snowElement.getContext("2d");
  9.     var width  = config.clientWidth;
  10.     var height = config.clientHeight;
  11.     //canvas尺寸修正
  12.     snowElement.width  = width;
  13.     snowElement.height = height;
  14.     //构建雪球的数量
  15.     var snowNumber = 50;
  16.  
  17.     /**
  18.      * 雪球类
  19.      */
  20.     function Snow() {
  21.         this.radius = randomInRange(3, 10);
  22.         //初始的x位置
  23.         this.x = (Math.random() * width);
  24.         this.y = (Math.random() * height);
  25.         //滤镜
  26.         this.alpha = randomInRange(0.5,1);
  27.         //绘制雪球
  28.         this.render();
  29.     }
  30.  
  31.     /**
  32.      * 绘制雪球
  33.      * @param  {[type]} canvasContext [description]
  34.      * @return {[type]}               [description]
  35.      */
  36.     Snow.prototype.render = function() {
  37.         //清除路径
  38.         //开始一个画布中的一条新路径（或者子路径的一个集合）
  39.         canvasContext.beginPath();
  40.         //用来填充路径的当前的颜色，白色的雪球
  41.         canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";
  42.         //一个中心点和半径，为一个画布的当前子路径添加一条弧线
  43.         //坐标，圆，沿着圆指定弧的开始点和结束点的一个角度
  44.         //弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历
  45.         canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
  46.         //关闭子路径
  47.         canvasContext.closePath();
  48.         //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径
  49.         canvasContext.fill();
  50.     }
  51.  
  52.  
  53.     /**
  54.      * 随机处理
  55.      * @param  {[type]} min [description]
  56.      * @param  {[type]} max [description]
  57.      * @return {[type]}     [description]
  58.      */
  59.     function randomInRange(min, max) {
  60.         var random = Math.random() * (max - min) + min;
  61.         return random;
  62.     }
  63.  
  64.     //构建雪球
  65.     for (var i = 0; i < snowNumber; ++i) {
  66.         new Snow();
  67.     }
  68.  
  69. })
  70.  
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6.  
  7. .container {
  8.     width: 100%;
  9.     height: 100%;
  10.     position: relative;
  11.     overflow: hidden;
  12. }
  13.  
  14. .bg-adaptive {
  15.     background-size: 100% 100%;
  16. } 
  1. .page-c {
  2.     width  : 100%;
  3.     height : 100%;
  4.     background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png");
  5.     position: absolute;
  6.     z-index: 30;
  7. }
  8.  
  9. #snowflake{
  10.     position:absolute;
  11.     left:0;
  12.     top:0;
  13.     z-index: 999999;
  14. }
  15.  
下一节