前言：
现时你们对“js雪花效果”大致比较关怀，朋友们都需要分析一些“js雪花效果”的相关文章。那么小编也在网上网罗了一些对于“js雪花效果””的相关知识，希望各位老铁们能喜欢，大家快快来了解一下吧！效果图来一张，跨年两个字这样子扣的：我发现在PS里面用通道扣一些高对比度的图片真的很爽
后面是雪花效果，前面两张图片，加一个倒计时
没有废话的时间了，直接上干货吧：
1, HTML的话，先得有一个`index.html`这样子的网页吧，新建一个文本文件，重命名成`index.html`就好了。然后写进去最最简单的HTML5的结构：
<!DOCTYPE html><html lang="zh" ><head><meta charset="UTF-8"><title>祝大家2019年一切顺利</title><meta name="viewport" content="width=device-width, initial-scale=1"></head><body></body></html>
如果官网用记事本来写这个网页的话，得存成utf-8编码的：
另存为，在编码里面选择utf-8
还是建议换一个好用一点的文本编辑器，我用的ee（EverEdit），还推荐使用Gvim、sublime这些。记事本的话，有点太简单了。
2, 在`</head>`前面一行加入css的引用:
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/style.css"></head>
相应地，还需要在当前目录下面新建一个叫做`css`的文件夹,再在里面新建一个文本文件，并重命名为`style.css`，
3, 在`</body>`的前面一行加入一个绘图标签`<canvas>`:
<canvas></canvas></body>
`<canvas>`标签算得上HTML5最有广阔创造空间的标签之一了，可以通过js在`<canvas>`里面实现各种很不可思议的效果。
4, 还是在`</body>`的前面，加入javascript的引用：
<canvas></canvas><script src="js/index.js"></script></body>
同样的方法，在当前文件夹下面新建`js`文件夹，再新建`index.js`文件。
5, 往`index.js`里面加入实现雪花效果的代码库，在这里先只是贴出来，具体js实现讲解，请听下回分解。
;!( function( w, d ) { 'use strict'; var Snow = function( x, y, r, sx, sy, o ) { this.x = x; this.y = y; this.r = r; this.sx = sx; this.sy = sy; this.o = o; this.draw = function() { ctx.beginPath(); ctx.arc( this.x, this.y, this.r, 0, 2 * Math.PI ); ctx.fillStyle = 'rgba( 255, 255, 255, ' + this.o + ' )'; ctx.fill(); } this.update = function() { if ( this.x + this.r > cw ) this.x = 0; if ( this.y + this.r > ch ) this.y = 0; if ( my && this.y + conf.sense >= my && this.y <= my + conf.sense ) this.x += this.sx; if ( mx && this.x + conf.sense >= mx && this.x <= mx + conf.sense ) this.y += this.sy; this.x += this.sx; this.y += this.sy; } }, anim = t => { let l = len; ctx.clearRect( 0, 0, cw, ch ); while ( l-- ) { items[ l ].draw(); items[ l ].update(); } animID = requestAnimationFrame( anim ); }, init = () => { items = []; len = cw > 1000 ? 2000 : cw < 500 ? 500 : 1000; for ( let i = 0; i < len; i++ ) { let r = Math.round( ( Math.random() * ( conf.maxR - conf.minR ) ) + conf.minR ), x = Math.round( ( Math.random() * ( cw + r ) ) - ( r * 2 ) ), y = Math.round( ( Math.random() * ( ch + r ) ) - ( r * 2 ) ), o = ( Math.random() * ( conf.maxO - conf.minO ) + conf.minO ).toFixed( 2 ), sx = Math.ceil( ( Math.random() * ( conf.maxS - conf.minS ) ) + conf.minS ), sy = Math.ceil( ( Math.random() * ( conf.maxS - conf.minS ) ) + conf.minS ); items.push( new Snow( x, y, r, sx, sy, o ) ); } animID = requestAnimationFrame( anim ); }, c = d.querySelector( 'canvas' ), ctx = c.getContext( '2d' ), conf = { maxR: 5, minR: 1, maxS: 2, minS: 0.3, maxO: 1, minO: .3, sense: 70 }, animID, timeoutID, mx = false, my = false, cw = innerWidth, ch = innerHeight, items = [], len = cw > 1000 ? 2000 : cw < 500 ? 500 : 1000; c.width = cw; c.height = ch; w.onresize = e => { if ( timeoutID ) clearTimeout( timeoutID ); timeoutID = setTimeout( () => { cw = innerWidth; ch = innerHeight; c.width = cw; c.height = ch; if ( animID ) cancelAnimationFrame( animID ); init(); }, 250 ); }; init(); w.onmousemove = e => { mx = e.x; my = e.y; } w.onmouseout = e => { mx = false; my = false; }})( this, document );同样地保存成为utf-8编码格式，现在先把javascript这块放到一边。
5, 现在已经实现了雪花效果了，因为网页的背景默认是白的，而雪花也是白的，所以看不见雪花。 编辑`css/style.css`文件，修改网页的背景为黑色：
html, body { margin: 0; background: black;}好了，现在看到的网页效果应该是这个样子的：
雪花效果已经实现
接下来，将两张图片进行布局，再加入倒计时，就完美啦。因为时间原因，今天就先到这里，后面的效果明天继续。
（未完待续）
