HTML5 캔버스 배경 이미지

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>