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

Question

通常，您可以使用 ctx.fillStyle = "whatever color here" 在 Canvas 中填充矩形。然后 ctx.fillRect(cords and length and width here) .有没有语法可以说 ctx.fillRect(someImagePathHere, xOfTopLeft, yofTopLeft)
如果没有，我还能如何实现这一目标？

Answer 1

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

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

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

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

使用这个 256x256 的图像



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

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

canvas { border: 1px solid black; }

<canvas></canvas>

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

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

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>

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

// 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; }

<canvas></canvas>

也就是说，“fillRect”是不明确的，也许您想将图像用作图案，在这种情况下，您需要使用 createPattern 从中制作图案

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

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



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

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>

图案与 Canvas 的原点有关，这意味着如果您只使用 ctx.fillRect (或任何其他填充)模式将在填充之间匹配。

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

<canvas></canvas>

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

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

function start() {
  const ctx = document.querySelector('canvas').getContext('2d');
  
  const pattern = ctx.createPattern(img, 'repeat');

  function render(time) {
    time *= 0.001;  // seconds;
    
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    
    const x = Math.sin(time * 1.1) * 150 + 150;
    const y = Math.sin(time * 1.2) * 50 + 50;
    
    ctx.fillStyle = pattern;
    ctx.fillRect(x, y, 30, 40);
    ctx.beginPath();
    ctx.arc(x, y, 25, 0, Math.PI * 2);
    ctx.fill();
    
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

canvas { border: 1px solid black; }

<canvas></canvas>

为了移动图案，您需要使用 ctx.translate 移动 Canvas 的原点(以及 ctx.rotate 、 ctx.scale 、 ctx.setTransform )

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

function start() {
  const ctx = document.querySelector('canvas').getContext('2d');
  
  const pattern = ctx.createPattern(img, 'repeat');

  function render(time) {
    time *= 0.001;  // seconds;
    
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    
    const x = Math.sin(time * 1.1) * 150 + 150;
    const y = Math.sin(time * 1.2) * 50 + 50;
    
    ctx.translate(x, y);
    
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, 30, 40);
    ctx.beginPath();
    ctx.arc(0, 0, 25, 0, Math.PI * 2);
    ctx.fill();
    
    ctx.setTransform(1, 0, 0, 1, 0, 0);  // set it back to the default
    
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

canvas { border: 1px solid black; }

<canvas></canvas>