canvas飘雪(上)，H5+JS+CSS3 实现圣诞情缘教程-慕课网

第1章效果预览与介绍
视频：1-1 课程简介(03:16)

第2章设计思路与蕴涵的知识点
视频：2-1 整体介绍(01:40)
视频：2-2 编程思路(02:15)

第8章最终效果与总结
编程：8-1 最终效果与总结

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，逆时针旋转

?不会了怎么办: canvasContext.arc(100, 100, 50, 0, Math.PI * 2, true);

index.html
snowflake.js
common.css
pageC.css

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣诞主题</title> <link rel='stylesheet' href='common.css' /> <link rel="stylesheet" type="text/css" href="pageC.css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script type="text/javascript" src="snowflake.js"></script> </head> <body> <section class="container">  <section class="page-a bg-adaptive"> </section>  <section class="page-b bg-adaptive"> </section>  <section class="page-c bg-adaptive">  <div class="window wood"> <div class="window-content" data-attr="red"> <div class="window-scene-bg"></div> <div class="window-close-bg"></div> <div class="window-left hover"></div> <div class="window-right hover"></div> </div> </div>  <canvas id="snowflake"></canvas> </section> </section> <script type="text/javascript"> //rem设置 (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; //宽与高度 document.body.style.height = clientWidth * (900 / 1440) + "px" }; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> </body> </html>

$(function() { var snowElement = document.getElementById("snowflake") var canvasContext = snowElement.getContext("2d"); //开始一个画布中的一条新路径（或者子路径的一个集合） canvasContext.beginPath(); //用来填充路径的当前的颜色，白色的雪球 canvasContext.fillStyle = "rgba(255, 255, 255, 0.8)"; //一个中心点和半径，为一个画布的当前子路径添加一条弧线 //坐标，圆，沿着圆指定弧的开始点和结束点的一个角度 //弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历 //? //关闭子路径 canvasContext.closePath(); //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径 canvasContext.fill(); })

*{ margin: 0; padding: 0; } .container { width: 100%; height: 100%; position: relative; overflow: hidden; } .bg-adaptive { background-size: 100% 100%; }

.page-c { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png"); position: absolute; z-index: 30; }

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

7-2 canvas飘雪(上)