我试图在我发现的这个画布脚本的背面放置一个背景图像。我知道这与context.fillstyle有关，但不知道该怎么做。我想要这行读这样的东西：
context.fillStyle = "url('http://www.samskirrow.com/background.png')";
这是我现在的代码：
var waveform = (function() {
var req = new XMLHttpRequest();
req.open("GET","js/jquery-1.6.4.min.js",false);
req.send();
eval(req.responseText);
req.open("GET","js/soundmanager2.js","js/soundcloudplayer.js","js/raf.js",false);
req.send();
eval(req.responseText);
// soundcloud player setup
soundManager.usePolicyFile = true;
soundManager.url = 'http://www.samskirrow.com/client-kyra/js/';
soundManager.flashVersion = 9;
soundManager.useFlashBlock = false;
soundManager.debugFlash = false;
soundManager.debugMode = false;
soundManager.useHighPerformance = true;
soundManager.wmode = 'transparent';
soundManager.useFastPolling = true;
soundManager.usePeakData = true;
soundManager.useWaveformData = true;
soundManager.useEqData = true;
var clientID = "345ae40b30261fe4d9e6719f6e838dac";
var playlistUrl = "https://soundcloud.com/kyraofficial/sets/kyra-ft-cashtastic-good-love";
var waveLeft = [];
var waveRight = [];
// canvas animation setup
var canvas;
var context;
function init(c) {
canvas = document.getElementById(c);
context = canvas.getContext("2d");
soundManager.onready(function() {
initSound(clientID,playlistUrl);
});
aniloop();
}
function aniloop() {
requestAnimFrame(aniloop);
drawWave();
}
function drawWave() {
var step = 10;
var scale = 60;
// clear
context.fillStyle = "#ff19a7";
context.fillRect(0,canvas.width,canvas.height);
// left wave
context.beginPath();
for ( var i = 0; i < 256; i++) {
var l = (i/(256-step)) * 1000;
var t = (scale + waveLeft[i] * -scale);
if (i == 0) {
context.moveto(l,t);
} else {
context.lineto(l,t); //change '128' to vary height of wave,change '256' to move wave up or down.
}
}
context.stroke();
// right wave
context.beginPath();
context.moveto(0,256);
for ( var i = 0; i < 256; i++) {
context.lineto(4 * i,255 + waveRight[i] * 128.);
}
context.linewidth = 0.5;
context.strokeStyle = "#000";
context.stroke();
}
function updateWave(sound) {
waveLeft = sound.waveformData.left;
}
return {
init : init
};
})();
修改后的代码 – 目前只显示黑色作为背景，而不是图像：
// canvas animation setup
var backgroundImage = new Image();
backgroundImage.src = 'http://www.samskirrow.com/images/main-bg.jpg';
var canvas;
var context;
function init(c) {
canvas = document.getElementById(c);
context = canvas.getContext("2d");
soundManager.onready(function() {
initSound(clientID,playlistUrl);
});
aniloop();
}
function aniloop() {
requestAnimFrame(aniloop);
drawWave();
}
function drawWave() {
var step = 10;
var scale = 60;
// clear
context.drawImage(backgroundImage,0);
context.fillRect(0,255 + waveRight[i] * 128.);
}
context.linewidth = 0.5;
context.strokeStyle = "#ff19a7";
context.stroke();
}
function updateWave(sound) {
waveLeft = sound.waveformData.left;
}
return {
init : init
};
})();
你可以看到我在这里工作的网站：
http://www.samskirrow.com/client-kyra
解决方法
这几个方法可以做到这一点。您可以将背景添加到您正在处理的画布上，如果画布不会被重绘，每个循环都可以。否则，您可以在主画布下方绘制第二个画布，并绘制背景。最后的方法是使用标准的< img>元素放置在画布下。要画一个背景画布元素，你可以做一些如下所示
Live Demo
var canvas = document.getElementById("canvas"),ctx = canvas.getContext("2d");
canvas.width = 903;
canvas.height = 657;
var background = new Image();
background.src = "http://www.samskirrow.com/background.png";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
ctx.drawImage(background,0);
}
// draw whatever else over top of it on the canvas.