HTML5畫布背景圖片

Question

我想在我發現的這個畫布腳本的背面放置背景圖片。我知道這與context.fillstyle有關，但不知道如何去做。我想該行讀這樣的事情：

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

這裏是我當前的代碼：

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

修改後的代碼 - 目前僅僅顯示爲背景的黑色，而不是一個形象：

// 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

Theres有幾種方法可以做到這一點。你可以爲你當前正在處理的畫布添加一個背景，如果畫布不會重繪，那麼每個循環都可以。否則，您可以在主畫布下方製作第二個畫布，併爲其繪製背景。最後的方法是使用放置在畫布下的標準<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>