canvas 音乐跳动效果 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style type="text/css">
            * {margin: 0;padding: 0;}
            html, body {height: 100%;overflow: hidden;}
            .music-play {margin: 100px;}
        </style>
    </head>
    <body>
        <div class="music-play">
            <canvas width="200" height="100"></canvas>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function() {
            const oc = document.querySelector('canvas');
            if (oc.getContext('2d')) {
                const ctx = oc.getContext('2d');
                
                const lineArr = [
                    {
                        start: {
                            x: 40,
                        },
                        end: {
                            x: 40,
                            y: 60
                        }
                    },
                    {
                        start: {
                            x: 80
                        },
                        end: {
                            x: 80,
                            y: 80
                        }
                    },
                    {
                        start: {
                            x: 120
                        },
                        end: {
                            x: 120,
                            y: 100
                        }
                    },
                    {
                        start: {
                            x: 160
                        },
                        end: {
                            x: 160,
                            y: 120
                        }
                    }
                ];

                
                function step() {
                    ctx.clearRect(0, 0, oc.width, oc.height);
                    ctx.save();
                    ctx.fillStyle = "#000";
                    ctx.fillRect(0, 0, oc.width, oc.height);
                    ctx.restore();
                    
                    for (let i = 0; i < lineArr.length; i++) {
                        if (lineArr[i].end.y >= oc.height - 30) {
                            lineArr[i].end.dir = 'add';
                        } else if (lineArr[i].end.y <= 30) {
                            lineArr[i].end.dir = 'minus';
                        }
                        
                        if (lineArr[i].end.dir === 'minus') {
                            lineArr[i].end.y += 2;
                        } else {
                            lineArr[i].end.y -= 2;
                        }
                    }
                    
                    for (let i = 0; i < lineArr.length; i++) {
                        ctx.save();
                        // ctx.beginPath();
                        // ctx.strokeStyle = 'yellow';
                        // ctx.moveTo(lineArr[i].start.x, oc.height);
                        // ctx.lineTo(lineArr[i].end.x, oc.height - lineArr[i].end.y);
                        
                        ctx.fillStyle = "yellow";
                        ctx.fillRect(lineArr[i].start.x, oc.height - lineArr[i].end.y, 5, lineArr[i].end.y);
                        
                        // ctx.stroke();
                        ctx.restore();
                    }
                    
                    window.requestAnimationFrame(step);
                }
                
                window.requestAnimationFrame(step);
            }
        }
    </script>
</html>

posted @ 2020-06-05 10:42  qiuxd  阅读(502)  评论(0)  编辑  收藏  举报