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

- Sam Skirrow

---

你不能使用CSS来实现背景重复吗？ - Muhammad Shoaib

@MuhammadShoaib：不，这不适用于绘制在画布上的图像。 - Cerbrus

Answer 1

使用canvas的createPattern函数。

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

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

img.addEventListener('load', () => {
  const 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>

（这是2个示例中最快的一个）。

或者，尝试手动实现：

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

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

img.addEventListener('load', () => {
  for (let w = 0; w < canvas.width; w += img.width) {
    for (let h = 0; h < canvas.height; h += img.height) {
      context.drawImage(img, w, h);
    }
  }
})

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

- Cerbrus

---

@Cerbrus 你知道如何移动背景图案吗？就像这个网站上的 http://bdadam.com/blog/panning-and-scrolling-background-images-using-the-canvas-element.html - Damsorian

@Damsorian：你刚刚贴了一个教程，解释了它是如何工作的。 - Cerbrus

要自动重复画布图案（而不是手动创建副本），您可以使用 pattern.setTransform()：https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern/setTransform - Kokodoko