HTML5 Tuval arka plan resmi

Question

Bulduğum bu tuval komut dosyasının arkasına bir arka plan resmi yerleştirmeye çalışıyorum. Bunun context.fillstyle ile ilgili bir şey olduğunu biliyorum, ancak bunun nasıl yapılacağından emin değilim.

: - Şu anda sadece arka plan olarak siyah gösteren görüntü değil

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

Revize kodu:

İşte

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

benim geçerli kod: Böyle bir şey okumak o çizgiyi istiyorum

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

Sen burada üzerinde çalışıyorum siteyi görebilirsiniz: http://www.samskirrow.com/client-kyra

Answer 1

Bunu yapabileceğiniz birkaç yol var. Şu anda üzerinde çalıştığınız tuvale bir arka plan ekleyebilirsiniz, bu da tuvalin yeniden çizilmemesi durumunda her döngü düzgün olacaktır. Aksi takdirde, ana kanvasınızın altına ikinci bir tuval yapabilir ve arka planını çizebilirsiniz. Son yol, yalnızca tuvalin altına yerleştirilmiş standart bir <img> elemanını kullanmaktır. Tuval öğesi üzerine bir arka plan çizmek için aşağıdaki gibi bir şey yapabilirsiniz:

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

Tuval arka plan resmi olarak .png dosyasını kullanarak etmez. gif veya jpg gibi diğer dosya uzantılarına geçmek iyi çalışıyor.

Answer 3

Neden bunu stili yok:

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