HTML5利用canvas绘制动态信号瀑布图

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。

对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

因此 ，transparent black 表示 (0,0,0,0)。

color/alpha 以数组形式存在，并且既然数组包含了每个像素的四条信息，数组的大小是 ImageData 对象的四倍。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

包含 color/alpha 信息的数组存储于 ImageData 对象的 data 属性中。

提示：在操作完成数组中的 color/alpha 信息之后，您可以使用 putImageData() 方法将图像数据拷贝回画布上。

目的：在600*100的画布上面滚动显示接收到的信号数据，数据矩阵600*200，一个数据点定义为一个像素点。示例如下：

<canvas id="myCanvas" style="width:600px;height:100px;border:1px solid #000000"></canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
c.width = 600;
c.height = 100;
var imgData=ctx.createImageData(1,1);

var index = 0;
var t = setInterval(function(){
var r = Math.random();
for(var x = 0;x<600;x++){

for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i+0]=255;
imgData.data[i+1]=Math.round(r * 255);
imgData.data[i+2]=0;
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,x,index>100?99:index);
}
index++;

if(index > 100){
var img=ctx.getImageData(0,0,600,100);
ctx.putImageData(img,0,-1);
}

if(index == 200){
clearInterval(t);
}
},10);

</script>

最终结果：