<!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. FFT字符串匹配

    本文半原创 参考资料:其实就是照抄的什么参考啊 我们知道KMP可以用来在线性复杂度内进行制胡窜匹配 今天教您一种新方法:用FFT进行字符串匹配 您可能觉得这很玄学,FFT不是做多项式卷积的吗,怎么还可 ...

  2. Nexus 相关

    https://help.sonatype.com/repomanager3/download https://www.jianshu.com/p/5fc8fb14d25c

  3. Flume启动报错[ERROR - org.apache.flume.sink.hdfs. Hit max consecutive under-replication rotations (30); will not continue rolling files under this path due to under-replication解决办法（图文详解）

    前期博客 Flume自定义拦截器(Interceptors)或自带拦截器时的一些经验技巧总结(图文详解)   问题详情 -- ::, (SinkRunner-PollingRunner-Default ...

  4. sublime中设置view_in_browser

    使用package control 管理的view-in-browser插件,用户可以在浏览器中打开任意当前sublime Text中tab所处的文件,例如html.js等. 1.Ctrl+Shift ...

  5. EA添加流程图

  6. HMAC算法加密

    /** * HMAC算法加密 * @param message 待加密信息 * @param key 密钥 * @return */ public static String HmacSHA256(b ...

  7. Yii2 前台控制器访问权限控制

    class BaseController extends Controller { public function behaviors() { return [ 'access' => [ 'c ...

  8. 23-----BBS论坛

    BBS论坛(二十三) 23.添加板块 (1)apps/models class BoardModel(db.Model): __tablename__ = 'board' id = db.Column ...

  9. java——数组栈 ArrayStack

    栈的应用: undo操作-编辑器 系统调用栈-操作系统 括号匹配-编译器 以下是动态数组实现的数组栈: 定义动态数组: package Date_pacage; public class Array& ...

  10. hadoop 常用hdfs命令