最近公司要在浏览器上加个波形图，本人搞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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
