html5实现进来看看1分钟用HTML5实现的雪花后果HTML5实例001

后面是雪花效果，前面两张图片，加一个倒计时

没有废话的韶光了，直接上干货吧：

1, HTML的话，先得有一个`index.html`这样子的网页吧，新建一个文本文件，重命名成`index.html`就好了。
然后写进去最最大略的HTML5的构造：

html5实现进来看看1分钟用HTML5实现的雪花后果HTML5实例001 JavaScript

（图片来自网络侵删）

<!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的引用:

相应地，还须要在当前目录下面新建一个叫做`css`的文件夹,再在里面新建一个文本文件，并重命名为`style.css`，

3, 在`</body>`的前面一行加入一个绘图标签`<canvas>`:

`<canvas>`标签算得上HTML5最有广阔创造空间的标签之一了，可以通过js在`<canvas>`里面实现各种很不可思议的效果。

4, 还是在`</body>`的前面，加入javascript的引用：

同样的方法，在当前文件夹下面新建`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;}

好了，现在看到的网页效果该当是这个样子的：

雪花效果已经实现

接下来，将两张图片进行布局，再加入倒计时，就完美啦。
由于韶光缘故原由，本日就先到这里，后面的效果来日诰日连续。

（未完待续）