HTML5画布的背景图像重复 [英] HTML5 canvas background image repeat

问题描述

我有一个HTML5画布绘制的声波。我已经设置为背景图片，但是，我希望这个背景图象重复背景。谁能告诉我，我会怎么做这一点，我需要添加到我的code的内容：

  VAR和backgroundImage =新的图像（）;
backgroundImage.src ='http://www.samskirrow.com/client-kyra/images/main-bg.jpg';
VAR帆布;
VAR背景;功能的init（C）{
    帆布=的document.getElementById（C）;
    上下文= canvas.getContext（2D）;
    soundManager.onready（函数（）{
        initSound（客户端ID，playlistUrl）;
    }）;
    aniloop（）;
}功能aniloop（）{
    requestAnimFrame（aniloop）;
    drawWave（）;
}功能drawWave（）{    无功步骤= 10;
    VAR规模= 60;    //明确
    context.drawImage（将backgroundImage，0，0）;    //左波
    context.beginPath（）;
    context.moveTo（0，256）;
    对于（VAR I = 0; I＆LT; 256;我++）{
        context.lineTo（6 * I，257 + waveLeft [I] * 80）;
    }
    context.lineWidth = 1;
    context.strokeStyle =＃000;
    context.stroke（）;    //正确的波
    context.beginPath（）;
    context.moveTo（0，256）;
    对于（VAR I = 0; I＆LT; 256;我++）{
        context.lineTo（6 * I，256 + waveRight [I] * 80）;
    }
    context.lineWidth = 1;
    context.strokeStyle =＃000;
    context.stroke（）;
}功能updateWave（音）{
    waveLeft = sound.waveformData.left;
}返回{
    初始化：初始化
};
}）（）;
 

您可以在这里看到这个动作code：
http://www.samskirrow.com/client-kyra

解决方案

使用画布<一个href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors#A_createPattern_example\"><$c$c>createPattern功能

\r

\r

VAR帆布=的document.getElementById（帆布），\r
    上下文= canvas.getContext（2D），\r
    IMG =新的图像（）;\r
\r
img.src ='https://www.google.nl/images/srpr/logo3w.png';\r
\r
img.onload =功能（）{\r
    //创建模式\r
    VAR PTRN = context.createPattern（IMG，'重复'）; //创建与此图像模式，并将其设置为重复。\r
    context.fillStyle = PTRN;\r
    context.fillRect（0，0，canvas.width，canvas.height）; // context.fillRect（X，Y​​，宽度，高度）;\r
}

\r

＆LT;帆布ID =画布WIDTH =600px的高度=600px的＆GT;＆LT; /帆布＆GT;

\r

\r

\r

（这是在最快的2个样本的）。

或者，尝试手动实现：

\r

\r

VAR帆布=的document.getElementById（帆布），\r
    上下文= canvas.getContext（2D），\r
    IMG =新的图像（）;\r
\r
img.src ='https://www.google.nl/images/srpr/logo3w.png';\r
\r
img.onload =功能（）{\r
    对于（VAR W = 0; W＆LT; canvas.width; W + = img.width）{\r
        对于（VAR H = 0; H＆LT; canvas.height; H + = img.height）{\r
            context.drawImage（IMG，W，H）;\r
        }\r
    }\r
}

\r

＆LT;帆布ID =画布WIDTH =600px的高度=600px的＆GT;＆LT; /帆布＆GT;

\r

\r

\r

I have a html5 canvas that draws a sound wave. I have set the background as an background image, however, I want this background image to repeat. Can anyone tell me how I would do this and what I need to add into my code:

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

You can see this code in action here: http://www.samskirrow.com/client-kyra

解决方案

Use the canvas' createPattern function

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>

(This is the fastest of the 2 samples).

Or, try a manual implementation:

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>

这篇关于HTML5画布的背景图像重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！