画布调整图像对象并重复图案

Question

我的画布是500px x 500px。 我的png图像是500px x 500px：

我想重新调整图像大小... 100px x 100px，然后使用该重新调整大小的图像作为定义重复模式的一部分，然后将其用作fillStyle以在整个画布上重复。这就是我做的......

//...define canvas, ctx, width and height above

var image = new Image();
image.onload = function() {
  _self = this;
  drawBG();
}
image.src = 'img.png';

function drawBG() {
  var space = ctx.createPattern(_self, 'repeat');
  ctx.fillStyle = space;
  ctx.fillRect(0, 0, width, height);
}

现在，如果我想浪费自己的时间，这一切都很好。请参阅，空间图像与画布大小相同。我的问题是......你如何首先调整原始图像的大小（在javascript中），然后再用它创建一个模式？

P.S。如何在堆栈溢出时重新调整图像大小？我在这里展示的这张图片是为了它的目的。

Answer 1

您可以使用drawImage(img, x, y, resizedWidth, resizedHeight)在第二个屏幕外画布上绘制图像，然后将此画布用作图案。

var ctx = canvas.getContext('2d');
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 = 50;
  patt.height = 50;
  patt.getContext('2d').drawImage(this, 0,0, patt.width, patt.height);
  // pass the resized canvas to your createPattern
  drawBG(patt);
}
image.src = 'http://lorempixel.com/500/500';

function drawBG(patternCanvas) {
  var space = ctx.createPattern(patternCanvas, 'repeat');
  ctx.fillStyle = space;
  ctx.fillRect(0, 0, 400, 200);
}

<canvas id="canvas" width="500" height="250"></canvas>