html直线动画,HTML5 Canvas流动线条动画特效

先看下演示：

HTML5 Canvas流动线条动画特效

或者看看liuyuanlin.com的顶部背景，可以借鉴一下。

怎么样?很好看把？可以用他在做背景等特效。

首先看下html结构代码：

HTML5 Canvas流动线条动画特效

其次是css样式css/style.css，仅供参考：

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background-color: #000;

overflow: hidden;

}

#holder {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

}

最后是重点，是js代码js/index.js：

(function () {

var pi = Math.PI;

var pi2 = 2 * Math.PI;

this.Waves = function (holder, options) {

var Waves = this;

Waves.options = extend(options || {}, {

resize: false,

rotation: 45,

waves: 5,

width: 100,

hue: [11, 14],

amplitude: 0.5,

background: true,

preload: true,

speed: [0.004, 0.008],

debug: false,

fps: false,

});

Waves.waves = [];

Waves.holder = document.querySelector(holder);

Waves.canvas = document.createElement('canvas');

Waves.ctx = Waves.canvas.getContext('2d');

Waves.holder.appendChild(Waves.canvas);

Waves.hue = Waves.options.hue[0];

Waves.hueFw = true;

Waves.stats = new Stats();

Waves.resize();

Waves.init(Waves.options.preload);

if (Waves.options.resize)

window.addEventListener('resize', function () {

Waves.resize();

}, false);

};

Waves.prototype.init = function (preload) {

var Waves = this;

var options = Waves.options;

for (var i = 0; i < options.waves; i++)

Waves.waves[i] = new Wave(Waves);

if (preload) Waves.preload();