<!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. 浅谈python web框架django2.x

    1.Django简介 Python下有多款不同的 Web 框架,Django是最有代表性的一种.许多成功的网站和APP都基于Django. Django是一个开源的Web应用框架,由Python写成. ...

  2. react 中文文档案例五 （循环列表）

    function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) = ...

  3. linux 环境下tomcat中部署jfinal项目

    tomcat中部署jfinal项目 问题现象如下图 问题描述: 我在自己的windows7系统上tomcat下面跑这个项目没有任何问题吗,但是当我把项目上传到linux服务器上的tomcatwebap ...

  4. 解决SharePoint密码更新后，创建Web Application 失败

    问题在sharepoint central administration中通过Configuration Wizards来创建一个web application,出现如下错误: The passwor ...

  5. Java 字节流和字符流

    程序中都是以流的形式进行数据的传输和保存,在java.io包中数据流操作的两大类是字节流和字符流. 1. 字节流 InputStream和OutputStream是所有表示字节流的类的父类,它们都是抽 ...

  6. python模块之openpyxl扩展

    主要是对openpyxl扩展进行扩展,使用归类等 1. 安装 pip install openpyxl 想要在文件中插入图片文件,需要安装pillow,安装文件:PIL-fork-1.1.7.win- ...

  7. python连接mysql数据库遇到的问题

    1.源代码: from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker from sqlalchemy ...

  8. 基于webpack的vue项目路径别名

    在vue的项目里,我们可以使用../这样的相对路径的方式引用不同目录的组件: import userinfo from '../../../components/userinfo.vue'; 使用.. ...

  9. vue--钩子函数1

    最近在学习自定义指令,这里做个整理 vue允许注册自定义指令,在2.0中,代码复用和抽象的主要形式是组件.然而有的情况下仍需要对普通DOM元素进行底层操作,这时就会用到自定义指令. 全局指令direc ...

  10. requirej入门nodeTpl使用（三）

    基本语法 HTML部分 在模板中的 HTML 部分,使用定界符“<?”和“?>”作为语法的开始和结束. 在定界符内,可以书写任意JavaScript语句,如: <?for(var i ...