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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/psuuuia/article/details/77542211

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>


最终结果:





展开阅读全文

没有更多推荐了,返回首页