canvas制作雪花效果
<!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() { /**
* 雪球
* @param {[type]} elementName [description]
*/
function Snowflake(elementName) { var snowElement = document.getElementById(elementName)
var canvasContext = snowElement.getContext("2d");
var width = config.clientWidth;
var height = config.clientHeight; //canvas尺寸修正
snowElement.width = width;
snowElement.height = height; //构建雪球的数量
var snowNumber = 50; //构建雪球对象
var snowArrObjs = initSnow(snowNumber, width, height);
var snowArrNum = snowArrObjs.length;
/**
* 绘制页面
* @return {[type]} [description]
*/
var render = function() {
//清理之前的矩形数据
canvasContext.clearRect(0, 0, width, height);
for (var i = 0; i < snowArrNum; ++i) {
snowArrObjs[i].render(canvasContext);
}
} /**
* 更新雪花
* @return {[type]} [description]
*/
var update = function() {
for (var i = 0; i < snowArrNum; ++i) {
snowArrObjs[i].update();
}
} /**
* 绘制与更新
* @return {[type]} [description]
*/
var renderAndUpdate = function() {
render();
update();
requestAnimationFrame(renderAndUpdate);
} renderAndUpdate();
} function initSnow(snowNumber, width, height) {
//雪球参数
var options = {
//雪球的半球距离
minRadius: 3,
maxRadius: 10,
// 运动的范围区域
maxX: width,
maxY: height,
//速率
minSpeedY: 0.05,
maxSpeedY: 2,
speedX: 0.05,
//滤镜
minAlpha: 0.5,
maxAlpha: 1.0,
minMoveX: 4,
maxMoveX: 18
}
var snowArr = [];
for (var i = 0; i < snowNumber; ++i) {
snowArr[i] = new Snow(options);
}
return snowArr;
} /**
* 雪球类
*/
function Snow(snowSettings) {
this.snowSettings = snowSettings;
this.radius = randomInRange(snowSettings.minRadius, snowSettings.maxRadius);
//初始的x位置
this.initialX = Math.random() * snowSettings.maxX;
this.y = -(Math.random() * 500);
//运行的速率
this.speedY = randomInRange(snowSettings.minSpeedY, snowSettings.maxSpeedY);
this.speedX = snowSettings.speedX;
//滤镜
this.alpha = randomInRange(snowSettings.minAlpha, snowSettings.maxAlpha);
//角度.默认是360
this.angle = Math.random(Math.PI * 2);
//运行的距离
this.x = this.initialX + Math.sin(this.angle);
//x移动距离
this.moveX = randomInRange(snowSettings.minMoveX, snowSettings.maxMoveX);
} /**
* 绘制雪球
* @param {[type]} canvasContext [description]
* @return {[type]} [description]
*/
Snow.prototype.render = function(canvasContext) {
//清除路径
//开始一个画布中的一条新路径(或者子路径的一个集合)
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();
} Snow.prototype.update = function() {
this.y += this.speedY;
if (this.y > this.snowSettings.maxY) {
this.y -= this.snowSettings.maxY;
}
this.angle += this.speedX;
if (this.angle > Math.PI * 2) {
this.angle -= Math.PI * 2;
}
//?
} /**
* 随机处理
* @param {[type]} min [description]
* @param {[type]} max [description]
* @return {[type]} [description]
*/
function randomInRange(min, max) {
var random = Math.random() * (max - min) + min;
return random;
} Snowflake("snowflake")
})
最新文章
- ParagraphString - 段落样式的简易处理
- 妙味课堂——HTML+CSS(第三课)
- AngularJS(15)-依赖注入
- 什么是WordPress?
- [Codeforces Round #247 (Div. 2)] A. Black Square
- fastJson将json字符串转换为map
- 用shell制作IP脚本
- 【备忘】MVC5 布署在windows2008 IIS7.5 出现的问题解决
- Mybatis配置文件SqlMapConfig.xml中的标签
- 四、Attribute
- jmeter实例介绍
- Python模块 2
- BUAA-OO第二单元小结
- C# 程序修改config文件后,不重启程序刷新配置ConfigurationManager
- 【渗透攻防】千变万化的WebShell
- MyBatis中choose when正确写法
- BTrace学习总结
- [转]mybatis如何直接 执行传入的任意sql语句 并按照顺序取出查询的结果集
- python 网页抓取并保存图片
- apache日志里出现GET http://wujieliulan.com/mnews.htmHTTP/1.1解决方法
热门文章
- 模板:二维树状数组 【洛谷P4054】 [JSOI2009]计数问题
- linux下虚拟主机配置
- JS执行顺序-函数声明提升、匿名函数、函数表达式
- webpack4.0入门配置文件
- 【转】eclipse上的.properties文件中文编辑显示问题
- Kibana6.x.x源码开发——执行 yarn start --no-base-path 启动命令后报错
- C#获取单元格值(使用NPOI插件)
- Rabbitmq相关学习网址
- layui的表单功能
- asp.net模板页实现类似jquery中document.ready