html绘制波形图,JS实现波形图

一直想写个波线图，但写出来发现这是点阵组成的，不知道如何把线条弄的特别的平滑，有会的，求留言评论指导。

1.[代码][JavaScript]代码

Document

.container{width:500px;height:500px;border:1px solid #DEDEDE;}

.container span{width:1px;height:50px;float:left;border-bottom:2px solid #F00;margin-bottom:0px;}

var i = 0;

(function abc() {

setTimeout(function () {

if (i++ < 500) {

var me = document.getElementsByClassName("container");

var j = document.createElement('span');

var th = document.getElementsByTagName("span");

var h = 0;

if (i > 1) {

var l = i - 2;

var h = th[l].clientHeight;

} else {

h = 50;

}

var arr = new Array(-2,-1,0,1,2);

var k = Math.floor((Math.random() * 5));

j.style.height = h + arr[k] + "px";

me[0].appendChild(j);

abc();

}

}, 50);

})()