前言

又到了白色相簿的季节，给博客页面加上雪花效果是再好不过的了。

截图

介绍

• 让页面开始下雪吧
• 较低的CPU消耗，移动端效果良好
• 原生JavaScript实现，不依赖其他类库
• 丰富的自定义项，可自定义多种选项

Typecho插件

Github地址：https://github.com/journey-ad/Snow-Typecho-Plugin/

如果你用的是Typecho，那么只需在Github下载插件并启用即可，Wordpress、Emlog等博客教程请接着往下看！

通用教程

1、创建画布
在方便的位置加入以下内容

2、引入JS
重要的数值已在注释中给出

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
    window.requestAnimationFrame = requestAnimationFrame;
})();

(function() {
    var flakes = [],
        canvas = document.getElementById("Snow"), //画布ID，与上一步创建的画布对应
        ctx = canvas.getContext("2d"),
        flakeCount = 200,  //雪花数量，数值越大雪花数量越多
        mX = -100,
        mY = -100;

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function snow() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i = canvas.height || flake.y = canvas.width || flake.x

>
> 如教程需要更新，或者相关链接出现404，可以在文章下面评论留言。

`Vultr`新用户注册送`100`美元/`16`个机房按小时计费，支持支付宝，【[点击查看](https://www.vultr.com/?ref=7043466)】。

                     **

    <div