canvas 模仿音频效果

2023-10-19 19:53:40
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>
效果图如下：
码农公寓

相关文章
