您如何转换音频进度条码，使其具有渐变色？

Question

正如我所做的那样，渐变本身只是显示我如何开始减小渐变，它只是变平而没有按照我的需要工作，我想逐渐增加条形的进度，而不是彩虹渐变。青蛙完全被弄平了。预先感谢您的帮助

进度栏屏幕截图：

HTML

<div class="video-progress hide" style="height: 3px;">
   <canvas class="progressbar-value" style="width: 0%;"></canvas>
   <div class="progressbar-load" style="width: 0%;"></div>
</div>

带有（JQuery 3.4.0）的Javascript

var music = $('#music')[0];
var audio = $('#music');
var playButton = $('.button-play');
var pauseButton = $('.button-play play');
var timer = $('.time-container');
var progressBar = $('.progressbar-value');
var progressContent = $('.video-progress');
var nowPlaying =  $('.description');
var visualizer = $('.visualizer');
var overlay = $('.content-overlay');
audio.bind('timeupdate', function(){
  var track_length = music.duration;
  var secs = music.currentTime;
  var progress = (secs/track_length) * 100;
  var tcMins = parseInt(secs/60);
  var tcSecs = parseInt(secs - (tcMins * 60));
  var canvas = $('.progressbar-value');  
  if(canvas.getContext){  
    var ctx = canvas.getContext('2d');         
    var rainbow = ctx.createLinearGradient(10, 0, 2000, 0);
    rainbow.addColorStop(0, 'rgba(26,  188, 156, .9)'); //blue
    rainbow.addColorStop(1/5, 'rgba(52,  152, 219, .9)'); //green
    rainbow.addColorStop(2/5, 'rgba(241, 196, 15,  .9)'); //yellow
    rainbow.addColorStop(3/5, 'rgba(230, 126, 34,  .9)'); //orange
    rainbow.addColorStop(1, 'rgba(211, 84,  0,   .9'); //red
    ctx.fillStyle = rainbow;
    ctx.fillRect(0, 0, 2000, 75);
  }
  progressBar.css({'width' : progress + ".'"%"'."});
  if(tcSecs < 10){tcSecs = '0' + tcSecs;}
  timer.html(tcMins + ':' + tcSecs);
});

Answer 1

您的代码不是完整的示例，并且不清楚在进度条上需要哪种动画，但是使用fillRect绘制的矩形具有固定的大小：

  

ctx.fillRect(0, 0, 2000, 75);

矩形宽度始终为2000，因此不会显示任何进度动画...

让我们从一个动画进度条的简单代码段开始。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var rainbow = ctx.createLinearGradient(10, 0, canvas.width, 0);
rainbow.addColorStop(0,     'rgba(26,  188, 156, .9)'); //blue
rainbow.addColorStop(1 / 5, 'rgba(52,  152, 219, .9)'); //green
rainbow.addColorStop(2 / 5, 'rgba(241, 196, 15,  .9)'); //yellow
rainbow.addColorStop(3 / 5, 'rgba(230, 126, 34,  .9)'); //orange
rainbow.addColorStop(4 / 5, 'rgba(211,  84,  0,  .9)'); //redish
rainbow.addColorStop(1,     'rgba(250,   0,  0,  .9)'); //red


var size = 50

function animate() {
  if (size < canvas.width) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = rainbow;
    ctx.fillRect(0, 10, size++, 25);
  }
}

setInterval(animate, 20);

<canvas id="canvas" width=600></canvas>

在此示例中，彩虹渐变是静态的，并且我增加了矩形的大小。