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

canvas飘雪(上)

圣诞主题针对飘雪的进一步升级，采用比较时髦的canvas实现。这里我将一步一步分析这个飘雪的实现步骤，看是挺复杂的，真正理解了其实也就那么一回事。

我的分解步骤是这样的：单个雪花的实现=》多个雪花的随机布局=》雪花运动的算法=》雪花类的封装

单个雪花的实现

参考右边的代码区域snowflake.js与效果区域的一个圆形的图形。对的，就是一个大圆形，这是便于大家观察所以特意放大了。缩小后就小雪花了，嘿嘿!!!

代码很简单，通过canvas提供的方法画出一个圆形就可以了，参考snowflake.js文件。canvas中有一个act方法，arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以是一个圆的某一段弧线。

arc的语法如下：arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)。

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

如果我们用arc画一个完整的圆，该怎么搞？大家注意到参数中有个开始角度与结束角度，如果我们开始角度是0，结束角度是360，不就是个正圆了？ 正解！但要注意的是，这里的角度是用“弧度”来表示的（Flash也是如此），一个完整的圆即360度，就是2PI弧度。

arc也是画的路径，所以我们要在他后面调用填充或描边的方法才能显出图形(代码中采用了RBG的白色fillStyle与透明度填充)。

最后要记得加beginPath与closePath了，因为canvas中的绘制方法（如stroke,fill），都会以“上一次beginPath”之后的所有路径为基础进行绘制。加上这个是为了开辟一个新的路径。总而言之，就是不要企图通过闭合现有路径来开始一条新路径，而开始一条新路径，以前的路径也不会闭合。

最后的效果参考右边的代码区域，通过arc画圆形，fillStyle填充颜色与透明度，beginPath与closePath规划一个新的路径，通过fill方法让fillStyle 属性所指定的颜色、渐变和模式来填充当前路径。

任务

在snowflake.js文件11行处填入任务代码

定义一个圆弧，大小是100，半径是50，角度是360，逆时针旋转

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.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  10.     <script type="text/javascript" src="snowflake.js"></script>
  11. </head>
  12.  
  13. <body>
  14.     <section class="container">
  15.         <!-- 第一幅画面 -->
  16.         <section class="page-a bg-adaptive">
  17.         </section>
  18.         <!-- 第二幅画面 -->
  19.         <section class="page-b bg-adaptive">
  20.         </section>
  21.         <!-- 第三幅画面 -->
  22.         <section class="page-c bg-adaptive">
  23.             <!-- 窗户关闭 -->
  24.             <div class="window wood">
  25.                 <div class="window-content" data-attr="red">
  26.                     <div class="window-scene-bg"></div>
  27.                     <div class="window-close-bg"></div>
  28.                     <div class="window-left hover"></div>
  29.                     <div class="window-right hover"></div>
  30.                 </div>
  31.             </div>
  32.             <!-- 雪花 -->
  33.             <canvas id="snowflake"></canvas>
  34.         </section>
  35.     </section>
  36.     <script type="text/javascript">
  37.     //rem设置
  38.     (function(doc, win) {
  39.         var docEl = doc.documentElement,
  40.             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  41.             recalc = function() {
  42.                 var clientWidth = docEl.clientWidth;
  43.                 if (!clientWidth) return;
  44.                 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  45.                 //宽与高度
  46.                 document.body.style.height = clientWidth * (900 / 1440) + "px"
  47.             };
  48.         win.addEventListener(resizeEvt, recalc, false);
  49.         doc.addEventListener('DOMContentLoaded', recalc, false);
  50.     })(document, window);
  51.     </script>
  52. </body>
  53.  
  54. </html>
  55.  
  1. $(function() {
  2.     var snowElement = document.getElementById("snowflake")
  3.     var canvasContext = snowElement.getContext("2d");
  4.     //开始一个画布中的一条新路径（或者子路径的一个集合）
  5.     canvasContext.beginPath();
  6.     //用来填充路径的当前的颜色，白色的雪球
  7.     canvasContext.fillStyle = "rgba(255, 255, 255, 0.8)";
  8.     //一个中心点和半径，为一个画布的当前子路径添加一条弧线
  9.     //坐标，圆，沿着圆指定弧的开始点和结束点的一个角度
  10.     //弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历
  11.     //? 
  12.     //关闭子路径
  13.     canvasContext.closePath();
  14.     //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径
  15.     canvasContext.fill();
  16. })
  17.  
  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.  
下一节