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: [{

timeModifier: 4,

lineWidth: 2,

amplitude: -100,

wavelength: 25

}, {

timeModifier: 4,

lineWidth: 1,

amplitude: -50,

wavelength: 20

}],

// Called on window 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;

}

});

總結

以上是生活随笔為你收集整理的html写原生曲线图,HTML5 平滑的正弦波曲线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。