HTML5画布背景图片重复

我有一个绘制声波的 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);

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

解决方法

使用画布’ 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,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"),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>

原文地址：https://www.jb51.cc/html5/168210.html