HTML5 Canvas image d'arrière-plan
Je suis en train de placer une image de fond sur le dos de cette toile script que j'ai trouvé. Je sais que c'est quelque chose à voir avec le contexte.fillstyle mais vous ne savez pas comment vous y prendre. Je voudrais que la ligne à lire quelque chose comme ceci:
context.fillStyle = "url('http://www.samskirrow.com/background.png')";
Voici mon code actuel:
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", false);
req.send();
eval(req.responseText);
req.open("GET", "js/soundcloudplayer.js", false);
req.send();
eval(req.responseText);
req.open("GET", "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, 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
};
})();
Révisé de code actuellement de montrer le noir comme le fond, pas une image:
//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, 0);
context.fillRect(0, 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 = "#ff19a7";
context.stroke();
}
function updateWave(sound) {
waveLeft = sound.waveformData.left;
}
return {
init : init
};
})();
Vous pouvez voir le site que je suis en train de travailler sur ici:
http://www.samskirrow.com/client-kyra
context.fillStyle
accepte uniquement les chaînes,CanvasGradient
etCanvasPattern
objets, et les cordes sont analysées comme CSS valeurs de couleur. Si vous voulez dessiner une image de la toile, créer unImage
objet avec le jeu de la source à l'image de l'URL, et puis il suffit d'utilisercontext.drawImage
. Si vous dessinez l'image avant toute autre chose dansdrawWave
, à droite lorsque vous désactivez la toile, vous avez votre arrière-plan.- Merci @Rikonator mon script n'est pas très bonne, toute chance que vous pouvez élaborer sur ce que je pourrais mettre en œuvre vos points??
- a déjà répondu et je n'ai rien à ajouter, mais ici, un violon avec une animation active de toute façon: jsfiddle.net/vZ8UT
- Merci de prendre le temps de faire cette démo @Rikonator, mon code révisé est au-dessus, actuellement, il suffit de montrer un arrière-plan noir - et non une image. Toutes les pensées?
- Se débarrasser de la
context.fillRect
immédiatement aprèscontext.drawImage
. Si vous utilisezfillRect
après avoir dessiné l'image, vous êtes essentiellement de remplir un rectangle de la taille de la toile avec la valeur par défaut du style de remplissage plus l'image de fond, en battant le point de l'élaboration de l'image. - Incroyable. Je vous remercie beaucoup pour votre aide, a fonctionné comme un charme!
Vous devez vous connecter pour publier un commentaire.
Theres quelques façons dont vous pouvez faire cette. Vous pouvez ajouter un arrière-plan de la toile, vous êtes actuellement en train de travailler sur, qui, si la toile ne va pas être redessiné chaque boucle est très bien. Sinon, vous pouvez faire une deuxième toile sous vos principaux de la toile et de dessiner le fond. La dernière solution est d'utiliser une norme
<img>
élément placé sous la toile. Pour dessiner un arrière plan sur l'élément canvas, vous pouvez faire quelque chose comme ce qui suit:Démonstration En Direct
Pourquoi ne pas vous style ça:
Toile n'utilisez pas .fichier png en image de fond. changer à d'autres extensions de fichiers comme gif ou jpg fonctionne très bien.