एचटीएमएल 5 कैनवास पृष्ठभूमि छवि

Question

मैं इस कैनवास स्क्रिप्ट के पीछे एक पृष्ठभूमि छवि लगाने की कोशिश कर रहा हूं। मुझे पता है कि यह संदर्भ के साथ कुछ करने के लिए है। फिलस्टाइल लेकिन यह सुनिश्चित नहीं है कि इसके बारे में कैसे जाना है।

: - वर्तमान में सिर्फ पृष्ठभूमि के रूप में काला दिखा रहा है, एक नहीं छवि

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

संशोधित कोड:

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

यहाँ मेरे वर्तमान कोड है: मैं कुछ इस तरह पढ़ने के लिए है कि रेखा करना चाहते हैं

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

आप साइट है कि मैं यहाँ पर काम कर रहा हूँ देख सकते हैं: http://www.samskirrow.com/client-kyra

Answer 1

कुछ तरीके हैं जो आप कर सकते हैं। आप या तो कैनवास में एक पृष्ठभूमि जोड़ सकते हैं जिस पर आप वर्तमान में काम कर रहे हैं, यदि कैनवास को फिर से लॉन्च नहीं किया जा रहा है तो प्रत्येक लूप ठीक है। अन्यथा आप अपने मुख्य कैनवास के नीचे एक दूसरा कैनवास बना सकते हैं और पृष्ठभूमि को खींच सकते हैं। अंतिम तरीका कैनवास के नीचे स्थित मानक <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,0); 
} 

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

Answer 2

कैनवास पृष्ठभूमि छवि के रूप .png फ़ाइल का उपयोग नहीं करता है। gif या jpg जैसे अन्य फ़ाइल एक्सटेंशन में बदलना ठीक काम करता है।

Answer 3

आप इसे क्यों शैली नहीं है बाहर:

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