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