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);
}

可能是浏览器的问题。

它在我的 MacBook Chrome 中完美运行：https://codepen.io/anon/pen/dNPvyJ?editors=1111

LinearGradient fillStyle 不工作

LinearGradient fillStyle isn't working

javascript

data-visualization

linear-gradients

fill

html5-canvas