我将如何用图像填充矩形？

Question

通常，您可以使用ctx.fillStyle = "whatever color here"和 然后在画布中填充矩形ctx.fillRect(cords and length and width here)。有没有我可以说的语法ctx.fillRect(someImagePathHere, xOfTopLeft, yofTopLeft)

如果没有，我还能如何实现这一目标？

Answer 1

这个问题是模棱两可的，因为有很多方法可以“用图像填充矩形”。

首先浏览器中的图像是异步下载的，因此您需要等待图像加载才能使用它。对于画布情况，获取图像的最常见方法是创建一个新的Image并设置一个onload侦听器

const img = new Image();
img.onload = someFunctionToCallWhenTheImageHasLoaded
img.src = 'http://url/to/image';

那么问题是“fillRect”是什么意思

使用这个 256x256 的图像

例如，要以下载的大小绘制图像，您可以使用drawImage3 个参数

ctx.drawImage(img, x, y);

const img = new Image();
img.onload = someFunctionToCallWhenTheImageHasLoaded
img.src = 'http://url/to/image';

ctx.drawImage(img, x, y);

const img = new Image();
img.onload = draw;
img.src = 'https://i.imgur.com/ZKMnXce.png';

function draw() {
  const ctx = document.querySelector('canvas').getContext('2d');
  ctx.drawImage(img, 0, 0);
}

要以不同的尺寸绘制图像，您可以使用

ctx.drawImage(img, x, y, width, height);

canvas { border: 1px solid black; }

<canvas></canvas>

ctx.drawImage(img, x, y, width, height);

要绘制图像的一部分，您可以使用

// part of image to draw
const srcX = 10;
const srcY = 20;
const srcWidth = 130;
const srcHeight = 140;

// where to draw it
const dstX = 60;
const dstY = 70;
const dstWidth = 160;
const dstHeight = 40;

ctx.drawImage(img, srcX, srcY, srcWidth, srcHeight,
              dstX, dstY, dstWidth, dstHeight);

const img = new Image();
img.onload = draw;
img.src = 'https://i.imgur.com/ZKMnXce.png';

function draw() {
  const ctx = document.querySelector('canvas').getContext('2d');
  const destX = 10;
  const destY = 20;
  const destWidth = 30;
  const destHeight = 40;
  ctx.drawImage(img, destX, destY, destWidth, destHeight);
}

canvas { border: 1px solid black; }

<canvas></canvas>

也就是说，“fillRect”是模棱两可的，也许您想将图像用作模式，在这种情况下，您需要使用 createPattern

const pattern = ctx.createPatttern(img, 'repeat');

对于这些让我们使用这个 16x16 像素的图像

然后，您可以使用该模式作为您的 fillStyle

ctx.fillStyle = pattern;
ctx.fillRect(10, 20, 30, 40);

// part of image to draw
const srcX = 10;
const srcY = 20;
const srcWidth = 130;
const srcHeight = 140;

// where to draw it
const dstX = 60;
const dstY = 70;
const dstWidth = 160;
const dstHeight = 40;

ctx.drawImage(img, srcX, srcY, srcWidth, srcHeight,
              dstX, dstY, dstWidth, dstHeight);

const img = new Image();
img.onload = draw;
img.src = 'https://i.imgur.com/ZKMnXce.png';

function draw() {
  const ctx = document.querySelector('canvas').getContext('2d');
  
  // part of image to draw
  const srcX = 10;
  const srcY = 20;
  const srcWidth = 130;
  const srcHeight = 140;

  // where to draw it
  const dstX = 60;
  const dstY = 70;
  const dstWidth = 160;
  const dstHeight = 40;

  ctx.drawImage(img, srcX, srcY, srcWidth, srcHeight,
                dstX, dstY, dstWidth, dstHeight);
}

canvas { border: 1px solid black; }

图案相对于画布的原点，这意味着如果您只使用ctx.fillRect（或任何其他填充）图案将在填充之间匹配。

ctx.fillRect(10, 20, 30, 40);
ctx.beginPath();
ctx.arc(50, 60, 25, 0, Math.PI * 2);
ctx.fill();

<canvas></canvas>

const pattern = ctx.createPatttern(img, 'repeat');

ctx.fillStyle = pattern;
ctx.fillRect(10, 20, 30, 40);

因为图案固定在原点，如果您在不更改原点的情况下制作动画，您会注意到图案不会移动

const img = new Image();
img.onload = draw;
img.src = 'https://i.imgur.com/fqgm8uh.png';

function draw() {
  const ctx = document.querySelector('canvas').getContext('2d');
  
  const pattern = ctx.createPattern(img, 'repeat');
  
  ctx.fillStyle = pattern;
  ctx.fillRect(10, 20, 30, 40);
}

canvas { border: 1px solid black; }

<canvas></canvas>

为了移动图案，您需要使用ctx.translate（以及ctx.rotate, ctx.scale, ctx.setTransform）移动画布的原点

ctx.fillRect(10, 20, 30, 40);
ctx.beginPath();
ctx.arc(50, 60, 25, 0, Math.PI * 2);
ctx.fill();

const img = new Image();
img.onload = draw;
img.src = 'https://i.imgur.com/fqgm8uh.png';

function draw() {
  const ctx = document.querySelector('canvas').getContext('2d');
  
  const pattern = ctx.createPattern(img, 'repeat');
  
  ctx.fillStyle = pattern;
  ctx.fillRect(10, 20, 30, 40);
  ctx.beginPath();
  ctx.arc(50, 60, 25, 0, Math.PI * 2);
  ctx.fill();
}

canvas { border: 1px solid black; }