canvas制作雪花效果

<!DOCTYPE html>
<html>

</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制作雪花效果的更多相关文章

用Canvas制作剪纸效果
在做剪纸效果之前,先介绍剪纸效果运用到的一些知识: 1.阴影: 在Canvas之中进行绘制时,可以通过修改绘图环境中的如下4个属性值来指定阴影效果: shadowColor:CSS格式的颜色字串.默认 ...
canvas 3D雪花效果
<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset=&qu ...
canvas制作倒计时效果
酷！使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
使用Canvas制作时钟动画
复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...
Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏
Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏转载来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...

随机推荐

Python学习过程（五）
这里记录下python怎么去和数据库打交道,也就是这么怎么去连接数据库,以及对数据库的操作,我这里用的sqlserver, 好了,首先当然是引入我们的模块包: import pymssql 猜的不错的 ...
Window安装TensorFlow- GPU环境
[简述] 关于Window安装TensorFlow- GPU环境的文章我想网站已经有非常多了,但是为什么还要写这篇文章呢,就是被网上的文章给坑了.由于pip install tensorflow-gp ...
es6-01
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer ManufacturersAssociation)通过ECMA-262标准化的脚本程 ...
C#获取单元格值（使用NPOI插件）
/// <summary> /// 获取单元格的值 /// </summary> /// <param name="item"></par ...
Windows任务计划创建计划，定时执行PowerShell命令
[环境介绍] 操作系统:Windows Server 2012 R2,64位操作系统 PowerShell版本:PowerShell 1.0 脚本位置:C:\BackUp.ps1 启动目录:C:\Wi ...
数据恢复（Data recovery）
定义数据恢复: 当存储介质出现损伤或由于人员误操作.操作系统故障本身故障所造成的数据不可见,无法读取.丢失. 工程师通过特殊的手段读取却在正常状态下不可见,不可读,无法读的数据. 数据恢复(Data ...
Linux系统lvm管理
pv: 物理卷,被pv命令处理过的物理分区vg:物理卷组被组装到一起的物理卷pe: 物理扩展 lvm设备的最小存储单元 lvm是pe的整数倍lvm:逻辑卷 ...
Spring boot的热部署
当把配置文件,比如yml也打到jar包后,如何修改配置,而又不用重新发布呢? 在jar包同一目录下,放置Application.yml (注意,不管jar包内是否此文件名)修改配置文件后,重新启动ja ...
word页眉添加横线与删除横线
一.删除横线 1.打开已有页眉Word2010文档,并且页眉有横线的,双击页眉 2.选中整个页眉段落,注意:一定要选择段落标记. 3.单击菜单“开始”功能模块. 4.在“段落”中单击边框线下三角按钮. ...
AsyncLocal 与 ThreadLocal ThreadStatic特性简介
AsyncLocal 与 ThreadLocal [.NET深呼吸]基于异步上下文的本地变量(AsyncLocal) https://www.cnblogs.com/tcjiaan/p/5007737 ...

canvas制作雪花效果

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

随机推荐

热门专题