慕课网

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

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

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

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.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"> </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> </section>  <canvas id="snowflake"></canvas> </section> <script type="text/javascript"> var config = {}; //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" config.clientWidth = clientWidth; config.clientHeight = clientWidth * (900 / 1440) }; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script type="text/javascript" src="snowflake.js"></script> </body> </html>

/** * 雪花 * canvas版 */ $(function() { var snowElement = document.getElementById("snowflake") var canvasContext = snowElement.getContext("2d"); var width = config.clientWidth; var height = config.clientHeight; //canvas尺寸修正 snowElement.width = width; snowElement.height = height; //构建雪球的数量 var snowNumber = 50; /** * 雪球类 */ function Snow() { this.radius = randomInRange(3, 10); //初始的x位置 this.x = (Math.random() * width); this.y = (Math.random() * height); //滤镜 this.alpha = randomInRange(0.5,1); //绘制雪球 this.render(); } /** * 绘制雪球 * @param {[type]} canvasContext [description] * @return {[type]} [description] */ Snow.prototype.render = function() { //清除路径 //开始一个画布中的一条新路径（或者子路径的一个集合） canvasContext.beginPath(); //用来填充路径的当前的颜色，白色的雪球 canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")"; //一个中心点和半径，为一个画布的当前子路径添加一条弧线 //坐标，圆，沿着圆指定弧的开始点和结束点的一个角度 //弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历 canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); //关闭子路径 canvasContext.closePath(); //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径 canvasContext.fill(); } /** * 随机处理 * @param {[type]} min [description] * @param {[type]} max [description] * @return {[type]} [description] */ function randomInRange(min, max) { var random = Math.random() * (max - min) + min; return random; } //构建雪球 for (var i = 0; i < snowNumber; ++i) { new Snow(); } })

*{ 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; } #snowflake{ position:absolute; left:0; top:0; z-index: 999999; }

写笔记

公开笔记

提交

全屏

请验证，完成请求

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

7-3 canvas飘雪(中)

canvas飘雪(中)

任务

写笔记

收藏课程后，能更快找到我哦～