<!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")
})

canvas制作雪花效果的更多相关文章

  1. 用Canvas制作剪纸效果

    在做剪纸效果之前,先介绍剪纸效果运用到的一些知识: 1.阴影: 在Canvas之中进行绘制时,可以通过修改绘图环境中的如下4个属性值来指定阴影效果: shadowColor:CSS格式的颜色字串.默认 ...

  2. canvas 3D雪花效果

    <!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset=&qu ...

  3. canvas制作倒计时效果

  4. 酷!使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  5. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  6. 用Canvas制作简单的画图工具

    今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...

  7. H5上传图片并使用canvas制作海报

    马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...

  8. 使用Canvas制作时钟动画

    复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...

  9. Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏

    Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...

随机推荐

  1. 完美解决:"library not found for - "

    分析原因,解决问题 在Xcode编译的时候,可能会遇到报这个错误"library not found for - ",这是为什么呢? 由于我们在项目中使用了一些第三方的库,如百度的静态库.当Xcode ...

  2. POJ1113 Wall

    题目来源:http://poj.org/problem?id=1113题目大意: 如图所示,给定N个顶点构成的一个多边形和一个距离值L.建立一个围墙,把这个多边形完全包含在内,且围墙距离多边形任一点的 ...

  3. Solr学习笔记(3) —— SolrJ管理索引库&集群

    一.什么是SolrJ solrj是访问Solr服务的java客户端,提供索引和搜索的请求方法,SolrJ通常嵌入在业务系统中,通过SolrJ的API接口操作Solr服务,如下图: 二.SolrJ的基本 ...

  4. Redis学习笔记(4)—— Jedis入门

    一.Jedis介绍 Redis不仅是使用命令来操作,现在基本上主流的语言都有客户端支持,比如Java.C.C#.C++.php.Node.js.Go等. 在官方网站里列的一些Java客户端,有jedi ...

  5. 华东交通大学2015年ACM“双基”程序设计竞赛1002

    Problem B Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Sub ...

  6. LINUX下用PHPIZE安装PHP GD扩展

    环境:LNMP in centOS 6.4. linux下PHP的扩展可以用phpize的方法,比较简单地进行启用. 以下以PHP-GD2 库安装为例子. sudo yum install php-g ...

  7. keepalived企业管理

    实践案例一:更改nginx反向代理只监听vip地址 10.0.0.3/nana.html 可以使用 10.0.0.5/nana.html  不可以使用 10.0.0.6/nana.html  不可以使 ...

  8. Windows10上安装OpenStack

    1. 启动Hyper-V 2. 在Hyper-V内安装Ubuntu 这两部可以参考http://www.cnblogs.com/jimmy-y/p/5328306.html(Ubuntu16类似) 3 ...

  9. Qt中的标准对话框

    1. Qt为开发者提供了一些可复用的对话框类型,如QMessageBox,QFileDialog,QPrintDialog, QColorDialog, QInputDialog, QProgress ...

  10. thymeleaf总结

    thymeleaf 基本功能是将 th:xxx的内容替换html标签的内容 原标签的内容会被替换掉,原内容只是前端用来显示demo的 和freemarker, velocity的重要区别是,它们的自定 ...