在模式中畫布隨機圖像

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

這是用一個圖像“ img / e.svg”創建模式。 可以說我有4-5張圖像（例如e.svg，e1.svg，e2.svg .....）。我如何創建相同的圖案，但要使用所有圖片並在圖案中隨機使用它們？ 該模式看起來類似於：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>