canvas画波形图

最新推荐文章于 2024-04-11 17:42:38 发布

yazi1297

最新推荐文章于 2024-04-11 17:42:38 发布

阅读量5.5k

点赞数

本文链接：https://blog.csdn.net/yazi1297/article/details/39610693

版权

最近公司要在浏览器上加个波形图，本人搞C++的，不会html5，在网上搜了半天没找到一个例子，只好自己研究了。。郁闷啊

画这个图主要用到html5的canvas，不多说，直接搞代码上来，注释已写好，自己看

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	canvas{
		background:#eee;
	}
  </style>
  <script>

	var x = 0; // canvas画布原点x
	var y = 0; // canvas画布原点y
	var x_base = x; // 我们要画的波形图的最后一个点的x坐标
	var y_base = 250; // 我们要画的波形图的最后一个点的y坐标
	var arrPoint = []; // 用于保存已经波形图的轨迹点
	var index = 0; // 这个我是用来打日志用的..下面为了看清除了多少次canvas画布
	var step = 10; // x轴每次走的步长
	var width=500; // 这个是画布宽度
	var height=500; // 这个是画图高度
	(function (){
		// 首先让我们的函数周期调用
		var itv = setInterval(function(){
			// 获取canvas对象和context,并进行一系列初始化
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
			context.strokeStyle = "rgb(255,0,0)";
			context.fileStyle = "rgb(255,0,0)";

			// 画图之前首先清理一下我们的画布,四个参数.
			// 1.坐标原点x
			// 2.坐标原点y
			// 3.要清理的宽度(这里宽度用的x_base是因为canvas画布的原点不断向左移动，变相的等于画布不断变宽
			//   之所以减一个step是需要看下文,因为在下文中,x_base每一次都会增加一个step,而我们在清理画布的时候,
			//   我们的画布原点还没有被移动,相当于我们在清除画布时,我们的画布宽度还没有增加,所以要减一个step,当然不减也可以,没事儿)
			// 4.画布高度
			context.clearRect(0,0,x_base-step,height);
			if(x_base > width){
				console.log("clear" + index);
				index++;
				// 画布原点x轴向左移动一个step的位置
				context.translate(step*-1,0);
			}
			
			// 向数组中添加数据,将我们每一次目标到达的终点坐标添加到数组中.这里我设置的条件是,保证数组大小不会超过我的画布宽度除以step个
			// 目的是针对画布定的,就是每一次我只画画布这么大小的图
			var obj = {};
			obj.x = x_base;
			obj.y = y_base;
			if(arrPoint.length>(width/step)){
				arrPoint.splice(0,1);
				console.log(arrPoint);
			}
			arrPoint.push(obj);
			
			// 开始画了,在画之前先将所有的图形都画出来
			context.beginPath();
			for(var i = 0; i < arrPoint.length; i++){
				context.lineTo(arrPoint[i].x,arrPoint[i].y);

			}
			// 再一次性将所有图形呈现在html上
			context.stroke();
			context.closePath();

			// OK,这时候已经花完了,现在要算一算我们的下一个目标点的坐标了,算完了以后,保存在一个全局变量中
			// 等待下次再执行画图函数时,将变量添加到数组中,让canvas画图使用
			x_base += step;
			y_base = 250 + Math.random()*20;
		},100)
	})()

  </script>
 </head>
 <body>
	<canvas id="canvas" width="500" height="500">
		你这不行啊..不支持canvas
	</canvas>
 </body>
</html>