LinearGradient fillStyle не работает

Question

Я создаю аудио визуализацию с использованием API веб-аудио, и у меня возникла проблема, когда я не могу установить линейный градиент, чтобы заполнить прямоугольники в моей визуализации.

Вот соответствующий код:

HTML

<div style="background-color: white; width:100%; height: 256px; position: relative; top: 50%; transform: translateY(-50%);"> 
    <canvas id="viz" style="background-color: white; height: 256px;"></canvas> 
</div> 

код JavaScript

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
context = new AudioContext(); 
//set context for viz 
var ctx = document.getElementById('viz').getContext('2d'); 
//create rainbow gradient and set fill style 
var gradient = ctx.createLinearGradient(0,0,0,256); 
gradient.addColorStop(0, '#FF0000'); 
gradient.addColorStop(0.2, '#FF7F00'); 
gradient.addColorStop(0.4, '#FFFF00'); 
gradient.addColorStop(0.55, '#00FF00'); 
gradient.addColorStop(0.7, '#0000FF'); 
gradient.addColorStop(0.85, '#4B0082'); 
gradient.addColorStop(1, '#9400D3'); 
ctx.fillStyle = gradient; 

var vizAnalyser = context.createAnalyser(); 
vizAnalyser.fftsize=2048; 
vizAnalyser.smoothingTimeConstant=.95; 
navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); 
navigator.getMedia({ 
    audio: true, 
    video: false 
}, function(localMediaStream) { 
    //connect audio nodes 
    source = context.createMediaStreamSource(localMediaStream); 
    source.connect(vizAnalyser) 
    draw(); 
}, function(err) { 
    console.log(err); 
}); 



function draw() { 
    //get frequency data from analyser node 
    var bufferLength = vizAnalyser.frequencyBinCount; 
    var hueData = new Uint8Array(bufferLength); 
    vizAnalyser.getByteFrequencyData(hueData); 
    var viz = document.getElementById("viz"); 

    ctx.clearRect(0, 0, viz.width, 256); 
    for (var i = 0; i < bufferLength; i++) 
    { 
     ctx.fillRect(i * 3, 256-hueData[i], 2, 256); 
    } 
    requestAnimationFrame(draw); 
} 

Визуализация рисует прямоугольники в нужных местах с надлежащей проклейки, но они черные, а не градиент.

Vizualization

Я посмотрел вокруг, и я не смог найти то, что я делаю неправильно. Любые идеи были бы оценены, спасибо!

Answer 1

С кодом нет ничего плохого.

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
context = new AudioContext(); 
//set context for viz 
var ctx = document.getElementById('viz').getContext('2d'); 
//create rainbow gradient and set fill style 
var gradient = ctx.createLinearGradient(0,0,0,256); 
gradient.addColorStop(0, '#FF0000'); 
gradient.addColorStop(0.2, '#FF7F00'); 
gradient.addColorStop(0.4, '#FFFF00'); 
gradient.addColorStop(0.55, '#00FF00'); 
gradient.addColorStop(0.7, '#0000FF'); 
gradient.addColorStop(0.85, '#4B0082'); 
gradient.addColorStop(1, '#9400D3'); 
ctx.fillStyle = gradient; 

var vizAnalyser = context.createAnalyser(); 
vizAnalyser.fftsize=2048; 
vizAnalyser.smoothingTimeConstant=.95; 
navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); 
navigator.getMedia({ 
    audio: true, 
    video: false 
}, function(localMediaStream) { 
    //connect audio nodes 
    source = context.createMediaStreamSource(localMediaStream); 
    source.connect(vizAnalyser) 
    draw(); 
}, function(err) { 
    console.log(err); 
}); 



function draw() { 
    //get frequency data from analyser node 
    var bufferLength = vizAnalyser.frequencyBinCount; 
    var hueData = new Uint8Array(bufferLength); 
    vizAnalyser.getByteFrequencyData(hueData); 
    var viz = document.getElementById("viz"); 

    ctx.clearRect(0, 0, viz.width, 256); 
    for (var i = 0; i < bufferLength; i++) 
    { 
     ctx.fillRect(i * 3, 256-hueData[i], 2, 256); 
    } 
    requestAnimationFrame(draw); 
} 

Возможно, это проблема с браузером.

Он отлично работает в Chrome на моем MacBook: https://codepen.io/anon/pen/dNPvyJ?editors=1111