Question

到目前为止，我得到了代码：

var image = new Image();
image.onload = function() {
  // create an off-screen canvas
  var patt = document.createElement('canvas');
  // set the resized width and height
  patt.width = sirinaopto;
  patt.height = sirinaopto;
  patt.getContext('2d').drawImage(this, 0,0, patt.width, patt.height);
  // pass the resized canvas to your createPattern
      drawBG(patt);
image.src = 'img/e.svg'

//repeat background
function drawBG(patternCanvas) {
      var space = ctx.createPattern(patternCanvas, 'repeat');
      ctx.fillStyle = space;
    ctx.save();
    ctx.translate(zacetek, 0);
      ctx.fillRect(0, 0, ctx.canvas.width,  visina2);
    ctx.restore();
    }

这样做是用一个图像创建模式＆＃34; img / e.svg＆＃34;。假设我有4-5张图片（e.svg，e1.svg，e2.svg .....）我怎样才能创建相同的图案但是使用所有图片并在图案中随机使用它们？ patern看起来像simmilar：e.svg，e3.svg，e.svg，e2.svg ....而不是e.svg，e.svg，e.svg ......

Answer 1

随机性显然不是模式的一部分。

这是一个函数，它将在缓冲的画布上绘制一组随机显示的图像，然后它将从这个缓冲的画布返回一个模式。

您可以在没有任何参数的情况下调用var pattern = randomPattern();，它将使用图像数组中第一个图像的宽度和高度，以及全局canvas作为绘制随机性的区域。
或者，var pattern = randomPattern(imgWidth, imgHeight, areaWidth, areaHeight); 您为图像宽度定义固定值的位置，以及随机区域的严格值 （这意味着如果你像randomPattern(20,20,20,20)一样调用它，你实际上只会在模式中重复一个20x20图像）。

注意：此功能将以相同的宽度/高度绘制每个图像。

canvas.width = window.innerWidth>500? window.innerWidth: 500;
canvas.height = window.innerHeight>300? window.innerHeight: 300;
var ctx = canvas.getContext('2d');


var imagesLoaded = [];

var randomPattern = function(imgWidth, imgHeight, areaWidth, areaHeight) {
  // either set a defined width/height for our images, or use the first one's
  imgWidth = imgWidth || imagesLoaded[0].width;
  imgHeight = imgHeight || imagesLoaded[0].height;
  // restrict the randmoness size by using an areaWidth/Height
  areaWidth = areaWidth || canvas.width;
  areaHeight = areaHeight || canvas.height;

  // create a buffer canvas
  var patternCanvas = canvas.cloneNode(true);
  var patternCtx = patternCanvas.getContext('2d');

  patternCanvas.width = areaWidth;
  patternCanvas.height = areaHeight;

  var xloops = Math.ceil(areaWidth / imgWidth);
  var yloops = Math.ceil(areaHeight / imgHeight);

  for (var xpos = 0; xpos < xloops; xpos++) {
    for (var ypos = 0; ypos < yloops; ypos++) {
      var img = imagesLoaded[Math.floor(Math.random() * imagesLoaded.length)];
      patternCtx.drawImage(img, (xpos * imgWidth), (ypos * imgHeight), imgWidth, imgHeight);
    }
  }

  // create a pattern from this randomly created image
  return patternCtx.createPattern(patternCanvas, 'repeat');
}

var loadImages = function() {
  var imagesToLoad = 4;
  for (var i = 0; i < imagesToLoad; i++) {
    var image = new Image();
    image.onload = function() {
      imagesLoaded.push(this);
      if (imagesLoaded.length === imagesToLoad) {
        draw();
      }
    }
    image.src = 'http://lorempixel.com/50/50?' + i;
  }
};

var draw = function() {
  //create the random pattern (should be moved out of the draw)
  var patt = randomPattern(30,30);
  ctx.fillStyle = patt;
  ctx.beginPath();
  ctx.arc(200, 150, 150, Math.PI * 2, 0);
  ctx.fill();
};

loadImages();

<canvas id="canvas"></canvas>

画布中的随机图像

1 个答案: