<!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. Leetcode 283. Move Zeroes 移动数组中的零 (数组，模拟)

    题目描述 已知数组nums,写一个函数将nums中的0移动到数组后面,同时保持非零元素的相对位置不变.比如已知nums=[0,1,0,3,12],调用你写的函数后nums应该是[1,3,12,0,0] ...

  2. linux下将当前目录下的文件名存到一个文本文件里

    如果只是想得到当前目录下(不包括子目录)的相关文件时:ls -l | grep  ".gz$" > 1.txt 如果想得到当前目录下,包括子目录中的相关文件时,应该用find ...

  3. mybatis插入是返回主键id

    <!-- 插入数据:返回记录的id值 --> <insert id="insertOneTest" parameterType="org.chench. ...

  4. mysql不支持emoji表情的问题的解决方法

    最近财神圈项目集成微信登录功能的过程中,当保存用户有昵称含有表情符号时后台服务抛出异常,原来是数据库默认字符集不支持emoji表情字符.找到问题的原因后,因为之前也没有遇到过这样的问题,也没思路,迅速 ...

  5. for别名

    name:for(int i =0 ;i< a.length;i++){ System.out.println(i); for(int j =0;j<i;j++){ continue na ...

  6. Vscode 隐藏 工作区中的目录

    { "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg&qu ...

  7. 关闭 chrome 自动填充

    <input name="uname" type="text" required autocomplete="off" class=& ...

  8. C语言利用指针排序与选择排序算法

    //读入字符串,并排序字符串 #include <stdio.h> #include <string.h> #define SIZE 81 #define LIM 20 #de ...

  9. Experimental Educational Round: VolBIT Formulas Blitz C

    Description The numbers of all offices in the new building of the Tax Office of IT City will have lu ...

  10. TCP并发服务器简单示例

    并发服务器的思想是每一个客户的请求并不由服务器直接处理,而是由服务器创建一个子进程来处理 1. 服务器端 #include <stdio.h> #include <sys/types ...