HTML5 Canvas background image

Question

Sto provando a posizionare un'immagine di sfondo sul retro di questo script su tela che ho trovato. So che ha qualcosa a che fare con il contesto, ma non è sicuro di come procedere. Mi piacerebbe che la linea di leggere qualcosa di simile:

context.fillStyle = "url('http://www.samskirrow.com/background.png')"; 

Ecco il mio codice corrente:

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

nuovo Codice - attualmente solo mostrando il nero come sfondo, non da un'immagine:

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

Si può vedere il sito che sto lavorando qui: http://www.samskirrow.com/client-kyra

Answer 1

Ci sono alcuni modi in cui puoi farlo. Puoi aggiungere uno sfondo alla tela su cui stai lavorando, che se il canvas non verrà ridisegnato, ogni loop andrà bene. Altrimenti puoi creare una seconda tela sotto la tua tela principale e disegnarne lo sfondo. L'ultimo modo è utilizzare semplicemente un elemento standard <img> posizionato sotto il canvas. Per disegnare uno sfondo sull'elemento canvas si può fare qualcosa di simile al seguente:

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

// Draw whatever else over top of it on the canvas. 

Answer 2

Tela non utilizzando il file .png come immagine di sfondo. il passaggio ad altre estensioni di file come gif o jpg funziona correttamente.

Answer 3

Perché non acconciare fuori:

<canvas id="canvas" width="800" height="600" style="background: url('./images/image.jpg')"> 
    Your browser does not support the canvas element. 
</canvas>