javascript - 您如何转换音频进度条码以使其具有渐变？

Question

正如我所做的那样，渐变本身只是显示我如何开始减少它，它只是变平并没有按我想要的那样工作，我想逐渐增加条形的进度，这个彩虹渐变而不是 Frog 完全并另外压扁。预先感谢您的帮助

进度条截图:

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>

Javascript (JQuery 3.4.0)

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>

在这个例子中，彩虹渐变是静态的，我增加了矩形的大小。