html波形报告,HTML5 Canvas sine-wave.js 直线/正弦波/锯齿波形

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var waves = new SineWaves({

el: document.getElementById('waves'),

speed: 4,

width: function() {

return $(window).width();

},

height: function() {

return $(window).height();

},

ease: 'SineInOut',

wavesWidth: '80%',

waves: [{}],

set1: [{

timeModifier: 4,

lineWidth: 2,

amplitude: -100,

wavelength: 0

}, {

timeModifier: 4,

lineWidth: 1,

amplitude: -50,

wavelength: 0

}],

set2: [{

timeModifier: 4,

lineWidth: 2,

amplitude: -100,

wavelength: 25

}, {

timeModifier: 4,

lineWidth: 1,

amplitude: -50,

wavelength: 20

}],

set3: [{

timeModifier: 1,

lineWidth: 2,

amplitude: -180,

wavelength: 50,

type: 'Triangle',

segmentLength: 1

}],

initialize: function() {

this.options.startWaves.call(this, 'set1');

var self = this;

$('.line').on('click', function() {

self.options.startWaves.call(self, 'set1');

});

$('.curve').on('click', function() {

self.options.startWaves.call(self, 'set2');

});

$('.jagged').on('click', function() {

self.options.startWaves.call(self, 'set3');

});

},

startWaves: function(waves) {

this.waves = this.options[waves];

this.options.resizeEvent.call(this);

this.setupWaveFns();

},

// Resize

resizeEvent: function() {

var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);

gradient.addColorStop(0, "rgba(0,134,141,1)");

var index = -1;

var length = this.waves.length;

while (++index < length) {

this.waves[index].strokeStyle = gradient;

}

// Clean Up

index = void 0;

length = void 0;

gradient = void 0;

}

});