1、在学习canvas的过程中，突然有了一个音频想法，就试着利用canvas 模仿制作一个音频动画效果，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音频效果</title>
</head>
<style type="text/css">
#myCanvas {
border: 1px solid #000000;
}
</style>
<body>
<canvas id="myCanvas" width="500" height="500">浏览器不支持Canvas</canvas>
</body>
</html>
<script type="text/javascript">
var car = document.getElementById("myCanvas");
var inter = setInterval(()=>{
straightLine(50, 50, 1, 50, 350, "#000");
straightLine(50, 350, 1, 400, 350, "#000");
//绘制10条音频
for (var i = 1; i < 11; i++) {
//
rectangle(30 + i*30,350,20,-300 * Math.random(),1,randomHexColor());
}
setTimeout(()=>{
var ctx = car.getContext("2d");
//开始
ctx.beginPath();
//清除上一个矩形内容
ctx.clearRect(50, 50, 300, 300);
//结束
ctx.closePath();
},290)
},300)
//随机生成十六进制颜色
function randomHexColor() {
//生成ffffff以内16进制数
var hex = Math.floor(Math.random() * 16777216).toString(16);
//while循环判断hex位数，少于6位前面加0凑够6位
while (hex.length < 6) {
hex = \'0\' + hex;
}
//返回‘#\'开头16进制颜色
return \'#\' + hex;
}
//常用的直线写法
function straightLine(startX, startY, lineW, endX, endY, color) {
// 必须判断是否存在该方法，即判断浏览器是否支持canvas
if (car.getContext) {
var ctx = car.getContext("2d");
//开始
ctx.beginPath();
//设置线的宽度
ctx.lineWidth = lineW;
// 起始点 x,y
ctx.moveTo(startX, startY);
//终点 x,y
ctx.lineTo(endX, endY);
//自定义颜色
ctx.strokeStyle = color;
//没写默认颜色为黑色
ctx.stroke();
//结束（不关闭的话会和开始的地方直接相接）
ctx.closePath();
}
}
//常用矩形的写法
function rectangle(startX, startY, Width, Height, reatState, color) {
var ctx = car.getContext("2d");
//开始
ctx.beginPath();
//根据状态值判断是否需要填充矩形（0：不需要，1：需要）
if (reatState == 0) {
//参数作用：x的起始坐标，y的起始坐标，x的宽度值，y的高度值
ctx.strokeRect(startX, startY, Width, Height);
} else if (reatState == 1) {
//设置填充的颜色 (注意：填充的颜色必须在fillReact方法之前,不然不生效)
ctx.fillStyle = color;
//被填充的矩形，参数作用：x的起始坐标，y的起始坐标，x的宽度值，y的高度值
ctx.fillRect(startX, startY, Width, Height);
}
ctx.stroke();
//结束
ctx.closePath();
}
</script>
效果图如下：