HTML5畫布背景圖像重複

Question

我有一個HTML5畫布，繪製一個聲波。我將背景設置爲背景圖像，但是，我希望重複此背景圖像。誰能告訴我，我會怎麼做這一點，我需要添加到我的代碼是什麼：

var backgroundImage = new Image(); 
backgroundImage.src = 'http://www.samskirrow.com/client-kyra/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); 

    // left wave 
    context.beginPath(); 
    context.moveTo(0, 256); 
    for (var i = 0; i < 256; i++) { 
     context.lineTo(6 * i, 257 + waveLeft[i] * 80.); 
    } 
    context.lineWidth = 1; 
    context.strokeStyle = "#000"; 
    context.stroke(); 

    // right wave 
    context.beginPath(); 
    context.moveTo(0, 256); 
    for (var i = 0; i < 256; i++) { 
     context.lineTo(6 * i, 256 + waveRight[i] * 80.); 
    } 
    context.lineWidth = 1; 
    context.strokeStyle = "#000"; 
    context.stroke(); 
} 

function updateWave(sound) { 
    waveLeft = sound.waveformData.left; 
} 

return { 
    init : init 
}; 
})(); 

這裏你可以看到這個代碼在行動： http://www.samskirrow.com/client-kyra

Answer 1

使用Canvas' createPattern功能

var canvas = document.getElementById("canvas"), 
 
    context = canvas.getContext("2d"), 
 
    img = new Image(); 
 

 
img.src = 'https://www.google.nl/images/srpr/logo3w.png'; 
 

 
img.onload = function(){ 
 
    // create pattern 
 
    var ptrn = context.createPattern(img, 'repeat'); // Create a pattern with this image, and set it to "repeat". 
 
    context.fillStyle = ptrn; 
 
    context.fillRect(0, 0, canvas.width, canvas.height); // context.fillRect(x, y, width, height); 
 
}

<canvas id="canvas" width="600px" height="600px"></canvas>

（這是the fastest of the 2 samples） 。

或者，嘗試手動執行：

var canvas = document.getElementById("canvas"), 
 
    context = canvas.getContext("2d"), 
 
    img = new Image(); 
 

 
img.src = 'https://www.google.nl/images/srpr/logo3w.png'; 
 

 
img.onload = function(){ 
 
    for (var w = 0; w < canvas.width; w += img.width) { 
 
     for (var h = 0; h < canvas.height; h += img.height) { 
 
      context.drawImage(img, w, h); 
 
     } 
 
    } 
 
}

<canvas id="canvas" width="600px" height="600px"></canvas>