用canvas实现小方块的音符跳动_canvas方块频谱-优快云博客

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/51648168

该博客介绍如何利用HTML5的canvas元素创建一个动态的音符跳动效果。通过JavaScript绘制小方块，并应用渐变颜色，实现随时间变化的视觉效果。主要涉及canvas的fillRect方法、createLinearGradient、addColorStop等API的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//绘制小方块
		function videobg(x,y,canvasGradient){
			var c1 = document.getElementById("canvas");
			//var r=112+(Math.random()*223);
			if(c1.getContext('2d')){
				var ctx = c1.getContext("2d");
				
				for(var i=0;i<Math.random()*149+1;i++){
					ctx.beginPath();
					ctx.fillRect(x+5,y-i*1.5,16,4);
					canvasGradient=ctx.createLinearGradient(x+5,y-400,x+5,343);
					canvasGradient.addColorStop(1,'rgb(42, 231, 0)');//绿
					canvasGradient.addColorStop(0.4,'rgb(216, 9, 0)');//红
					canvasGradient.addColorStop(0,'rgb(228, 219, 0)');//黄
					ctx.fillStyle = canvasGradient;
					ctx.fillRect(x+5,y-i*1.5,16,4);
					ctx.stroke();
					ctx.closePath();
					i+=5;
				
				}
			}
		}

window.onload = function () {
            var heightR = 0;
			var c1 = document.getElementById('canvas');
			var ctx = c1.getContext('2d');
			function clear(){
				ctx.clearRect(20,120,500,300);
			}

<pre name="code" class="html">function clear(){
				ctx.clearRect(20,120,500,300);
			}
            function play(){
                clear();
                videobg(37,340,'');
                videobg(58,340,'');
                videobg(95,340,'');
                videobg(116,340,'');
                videobg(153,340,'');
                videobg(174,340,'');
                videobg(211,340,'');
                videobg(232,340,'');
                videobg(269,340,'');
                videobg(290,340,'');
                videobg(327,340,'');
                videobg(348,340,'');
		 text('', 58, 360, '#ffffff');
            
            }
          var time = setInterval(play,200);
           
        }