用canvas 画波形图-初稿1
下面是效果图
================废话不多说，直接上代码=====================
// An highlighted block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>
<body>
<canvas id="myCanvas" width="1400" height="400" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var i = 0;
var j = 0;
var itv = setInterval(function(){
i++;
if(i>=1){
j++;
// console.log("this is math==> " + tmp_height);
i = 0;
//开始画图吧
var global_width = 1400;
var global_height = 400;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0066FF";//#FF0000
var tmp_height = parseInt(Math.random() * global_height/2 );
//线条的宽度
let tmp_width = 1;
//两个线条之间的宽度
let line_between = 2;
//画出一条横线出来
ctx.beginPath();
let middle_line_height = 2;
let middle_line_y = (global_height - middle_line_height)/2;
ctx.lineWidth = middle_line_height;
ctx.strokeStyle = "red"; // 红色路径
ctx.moveTo(0, middle_line_y);
ctx.lineTo(global_width, middle_line_y);
ctx.stroke(); // 进行绘制
//这里需要判断图像是否在画布外头
if(line_between*(j-1) >= global_width){
//满了则进行画图清空操作
ctx.clearRect(0, 0, global_width, global_height);
console.log("这里检测到画布满了");
j=0;
}
//这里是在计算线条起始(x,y)坐标，然后放入到画布中
ctx.fillRect(line_between*(j-1), (global_height-tmp_height)/2, tmp_width, tmp_height);
}
});
</script>
</body>
</html>
可以这么看效果，首先在本地桌面新建一个canvas.html，【名字你自己定义就好】,其次将代码粘贴进去，然后保存，最后最重要的一步，直接拖动canvas.html文件到任意浏览器中【IE暂时不知道是否好用，我这边没有尝试过】，然后就能看到canvas 画布中跳动的波形线条