[英]LinearGradient fillStyle isn't working
我正在使用Web音頻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);
}
可視化在適當的位置以適當的大小繪制矩形,但是矩形是黑色的,而不是漸變的。
我環顧四周,卻找不到我做錯了什么。 任何見解將不勝感激,謝謝!
您的代碼似乎沒有錯。
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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.