theme: juejin

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

掘友们，大家好呀，这篇文章给大家详细的介绍了使用HTML5+canvas实现雪花飘落特效，效果也是非常不错的，相对于来说非常简单，效果逼真，感兴趣的掘友，可以参考一下。

实现效果

需求分析

雪花一般采用圆形，想要更加好看一点的掘友，可以采用img代替，
雪花的数量，大小，数量设置固定，根据页面查看。采用随机数，控制大小，每一朵雪花的大小都不是一致的，用随机数控制半径，实现雪花的大小不同。
雪花的位置是不断下落的，雪花飘落，通过控制位置移动实现。
打字机：实现原理通过计时器，不断更新innerHTML

代码实现

CSS

先控制页面设置样式，黑色背景看雪花更直观。

body,
html {
    margin: 0;
    height: 100%;
    font-family: 'Lato';
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
    color: #FFF;
}
.box {
    height: 100%;
    color: #FFF;
    background-color: #000;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

JS

设置自执行function函数，执行过程中，创建casvas标签，设置大小。创建雪花，通过随机数设置元素大小，固定雪花数量，for循环添加到box中。

text()函数是用来实现打字机效果，通过计时器，字符串截取，索引增加，赋值元素盒子的innerHTML，时实现打字效果。

(function () {
    var COUNT = 300;
    var masthead = document.querySelector('.box');
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var width = masthead.clientWidth;
    var height = masthead.clientHeight;
    var i = 0;
    var active = false;
    function onResize() {
        width = masthead.clientWidth;
        height = masthead.clientHeight;
        canvas.width = width;
        canvas.height = height;
        ctx.fillStyle = '#FFF';
        var wasActive = active;
        active = width > 600;
        if (!wasActive && active)
            requestAnimFrame(update);
    }
    var Snowflake = function () {
        this.x = 0;
        this.y = 0;
        this.vy = 0;
        this.vx = 0;
        this.r = 0;
        this.reset();
    }
    Snowflake.prototype.reset = function () {
        this.x = Math.random() * width;
        this.y = Math.random() * -height;
        this.vy = 1 + Math.random() * 3;
        this.vx = 0.5 - Math.random();
        this.r = 1 + Math.random() * 2;
        this.o = 0.5 + Math.random() * 0.5;
    }
    canvas.style.position = 'absolute';
    canvas.style.left = canvas.style.top = '0';
    var snowflakes = [], snowflake;
    for (i = 0; i < COUNT; i++) {
        snowflake = new Snowflake();
        snowflake.reset();
        snowflakes.push(snowflake);
    }
    function update() {
        ctx.clearRect(0, 0, width, height);
        if (!active)
            return;
        for (i = 0; i < COUNT; i++) {
            snowflake = snowflakes[i];
            snowflake.y += snowflake.vy;
            snowflake.x += snowflake.vx;
            ctx.globalAlpha = snowflake.o;
            ctx.beginPath();
            ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.fill();
            if (snowflake.y > height) {
                snowflake.reset();
            }
        }
        requestAnimFrame(update);
    }
    // shim layer with setTimeout fallback
    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    onResize();
    window.addEventListener('resize', onResize, false);
    masthead.appendChild(canvas);
    function text() {
        var myp = document.getElementById("myp");
        var contentArr = "欢迎来到沸点冬日嘉年华".split("");
        var content = "";
        var index = 0;
        var ID = setInterval(function () {
            content += contentArr[index];
            myp.innerHTML = content + "_";
            index++;
            if (index === contentArr.length) {
                myp.innerHTML = content;
                clearInterval(ID);
            }
        }, 200);
    }
    text()
})();