<!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>

  1. /**
  2.  * 雪花
  3.  * canvas版
  4.  */
  5. $(function() {
  6.  
  7.     /**
  8.      * 雪球
  9.      * @param {[type]} elementName [description]
  10.      */
  11.     function Snowflake(elementName) {
  12.  
  13.         var snowElement = document.getElementById(elementName)
  14.         var canvasContext = snowElement.getContext("2d");
  15.         var width = config.clientWidth;
  16.         var height = config.clientHeight;
  17.  
  18.         //canvas尺寸修正
  19.         snowElement.width = width;
  20.         snowElement.height = height;
  21.  
  22.         //构建雪球的数量
  23.         var snowNumber = 50;
  24.  
  25.         //构建雪球对象
  26.         var snowArrObjs = initSnow(snowNumber, width, height);
  27.         var snowArrNum = snowArrObjs.length;
  28.         /**
  29.          * 绘制页面
  30.          * @return {[type]} [description]
  31.          */
  32.         var render = function() {
  33.             //清理之前的矩形数据
  34.             canvasContext.clearRect(0, 0, width, height);
  35.             for (var i = 0; i < snowArrNum; ++i) {
  36.                 snowArrObjs[i].render(canvasContext);
  37.             }
  38.         }
  39.  
  40.         /**
  41.          * 更新雪花
  42.          * @return {[type]} [description]
  43.          */
  44.         var update = function() {
  45.             for (var i = 0; i < snowArrNum; ++i) {
  46.                 snowArrObjs[i].update();
  47.             }
  48.         }
  49.  
  50.         /**
  51.          * 绘制与更新
  52.          * @return {[type]} [description]
  53.          */
  54.         var renderAndUpdate = function() {
  55.             render();
  56.             update();
  57.             requestAnimationFrame(renderAndUpdate);
  58.         }
  59.  
  60.         renderAndUpdate();
  61.     }
  62.  
  63.     function initSnow(snowNumber, width, height) {
  64.         //雪球参数
  65.         var options = {
  66.             //雪球的半球距离
  67.             minRadius: 3,
  68.             maxRadius: 10,
  69.             // 运动的范围区域
  70.             maxX: width,
  71.             maxY: height,
  72.             //速率
  73.             minSpeedY: 0.05,
  74.             maxSpeedY: 2,
  75.             speedX: 0.05,
  76.             //滤镜
  77.             minAlpha: 0.5,
  78.             maxAlpha: 1.0,
  79.             minMoveX: 4,
  80.             maxMoveX: 18
  81.         }
  82.         var snowArr = [];
  83.         for (var i = 0; i < snowNumber; ++i) {
  84.             snowArr[i] = new Snow(options);
  85.         }
  86.         return snowArr;
  87.     }
  88.  
  89.     /**
  90.      * 雪球类
  91.      */
  92.     function Snow(snowSettings) {
  93.         this.snowSettings = snowSettings;
  94.         this.radius = randomInRange(snowSettings.minRadius, snowSettings.maxRadius);
  95.         //初始的x位置
  96.         this.initialX = Math.random() * snowSettings.maxX;
  97.         this.y = -(Math.random() * 500);
  98.         //运行的速率
  99.         this.speedY = randomInRange(snowSettings.minSpeedY, snowSettings.maxSpeedY);
  100.         this.speedX = snowSettings.speedX;
  101.         //滤镜
  102.         this.alpha = randomInRange(snowSettings.minAlpha, snowSettings.maxAlpha);
  103.         //角度.默认是360
  104.         this.angle = Math.random(Math.PI * 2);
  105.         //运行的距离
  106.         this.x = this.initialX + Math.sin(this.angle);
  107.         //x移动距离
  108.         this.moveX = randomInRange(snowSettings.minMoveX, snowSettings.maxMoveX);
  109.     }
  110.  
  111.     /**
  112.      * 绘制雪球
  113.      * @param  {[type]} canvasContext [description]
  114.      * @return {[type]}               [description]
  115.      */
  116.     Snow.prototype.render = function(canvasContext) {
  117.         //清除路径
  118.         //开始一个画布中的一条新路径（或者子路径的一个集合）
  119.         canvasContext.beginPath();
  120.         //用来填充路径的当前的颜色，白色的雪球
  121.         canvasContext.fillStyle = "rgba(255, 255, 255, " + this.alpha + ")";
  122.         //一个中心点和半径，为一个画布的当前子路径添加一条弧线
  123.         //坐标，圆，沿着圆指定弧的开始点和结束点的一个角度
  124.         //弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历
  125.         canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
  126.         //关闭子路径
  127.         canvasContext.closePath();
  128.         //fill() 方法使用 fillStyle 属性所指定的颜色、渐变和模式来填充当前路径
  129.         canvasContext.fill();
  130.     }
  131.  
  132.     Snow.prototype.update = function() {
  133.         this.y += this.speedY;
  134.         if (this.y > this.snowSettings.maxY) {
  135.             this.y -= this.snowSettings.maxY;
  136.         }
  137.         this.angle += this.speedX;
  138.         if (this.angle > Math.PI * 2) {
  139.             this.angle -= Math.PI * 2;
  140.         }
  141.         //?
  142.     }
  143.  
  144.     /**
  145.      * 随机处理
  146.      * @param  {[type]} min [description]
  147.      * @param  {[type]} max [description]
  148.      * @return {[type]}     [description]
  149.      */
  150.     function randomInRange(min, max) {
  151.         var random = Math.random() * (max - min) + min;
  152.         return random;
  153.     }
  154.  
  155.     Snowflake("snowflake")
  156. })

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. 解读人：陈秋实，SP2: Rapid and Automatable Contaminant Removal from Peptide Samples for Proteomic Analyses（标准操作流程2：如何在蛋白质组学分析中快速和自动的去除肽段样品中的污染物）

    发表时间:2019年4月 IF:3.950 单位: 威斯康星医学院生物化学系 威斯康星医学院生物医学质谱研究中心 物种:人(人体肾脏细胞和蛋白) 技术:肽段清理 一. 概述:(用精炼的语言描述文章的整 ...

  2. P2770 航空路线问题

    \(\color{#0066ff}{题目描述}\) 给定一张航空图,图中顶点代表城市,边代表 2 城市间的直通航线.现要求找出一条满足下述限制条件的且途经城市最多的旅行路线. (1)从最西端城市出发, ...

  3. docker的常用操作

    查看所有的镜像: docker images 查看所有的容器: docker ps -a 查看正在运行的容器: docker ps 移除容器: docker rm -f 容器id 移除镜像: dock ...

  4. DataSet强类型、TableAdapter的使用

    简答使用可以看https://www.cnblogs.com/namejr/p/10411920.html中的"先来简单介绍dataset和datatable" DataSet强类 ...

  5. APP设计规范

    设计师DPI指南 本指南旨在为初级到中级设计人员提供“入门”或介绍性阅读,他们希望从一开始就学习或获得有关跨DPI和跨平台设计的更多知识. 尽可能少的数学和没有不可解析的图形,只需在简短的部分中订购直 ...

  6. Linux系统之ssh命令

    ssh命令用于远程登录上Linux主机. 常用格式:ssh [-l login_name] [-p port] [user@]hostname更详细的可以用ssh -h查看. 不指定用户: ssh 1 ...

  7. css3文本域焦点烟花效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. poj3040 发工资（贪心）

    题目传送门 题目大意:给一个人发工资,给出不同数量不同面额,(大面额一定是小面额的倍数),问最多能发几天,(每天实发工资>=应发工资). 思路:首先,将大于等于c的面额的钱直接每个星期给奶牛一张 ...

  9. Java学习笔记day03_引用数据类型

    1.引用数据类型 步骤: 1. 导包   2. 创建引用类型变量 类型 变量名 = new 类型名();   3. 使用数据类型的功能 变量名.功能名(); 如Scanner类: import jav ...

  10. python 数据可视化---Anscombe’s quartet

    import seaborn as sns sns.set(style="ticks") # Load the example dataset for Anscombe's qua ...