<!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>
