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