Question

我正在尝试使用自己创建的图形在画布上创建一个简单的重复图像。不幸的是，createPattern（img，repeat）仅导致图像的一个版本被重复。我尝试将其另存为图像，然后使用img.src加载该图像，还尝试创建第二个画布，并尝试使用第一个画布作为图案的基础在其上进行绘制，但是两者都产生相同的效果结果-图像的一个版本。我在这里想念什么？

这是我的代码的两个版本：

使用两个画布：

function draw() {

  var canvas1 = document.getElementById('drawcanvas')
  var ctx = canvas1.getContext('2d');
  var canvas2 = document.getElementById('canvas');
  var ctx2 = canvas2.getContext('2d');


  ctx.fillStyle = '#f5f2d0';
  ctx.fillRect(0, 0, 205, 255);
  ctx.fillStyle = '#FFF';
  ctx.fillRect(0, 0, 200, 250);
  ctx.fillStyle = '#77d499';
  ctx.fillRect(5, 5, 195, 245);
  var img = new Image();
  img.addEventListener('load', function() {
    ctx.drawImage(img, 48.75, 20, 100, 200)
  }, false)
  img.src = 'Images/wine-icon-15966.png';

  var pattern = ctx2.createPattern(canvas, 'repeat');
  ctx2.fillStyle = pattern;
  ctx.fillRect(0, 0, 2480, 3508);
}

使用单独的图像：

function draw() {

  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.fillStyle = '#f5f2d0';
  ctx.fillRect(0, 0, 2480, 3508);


  ctx.fillStyle = '#FFF';
  ctx.fillRect(0, 0, 200, 250);
  ctx.fillStyle = '#77d499';
  ctx.fillRect(5, 5, 195, 245);
  var img = new Image();
  img.addEventListener('load', function() {
    ctx.drawImage(img, 48.75, 20, 100, 200)
  }, false)
  img.src = 'Images/wine-icon-15966.png';

}

感谢您的帮助！

Answer 1

我做了一些调整，并使用“从画布绘制”选项使其工作。按照建议，我将逻辑移到了load语句中。我在createPattern中也提到了canvas，它是第二个画布的ID，而不是我给第一个画布（drawcanvas）赋予的ID，这意味着我实际上是在一块空白画布上绘制一块空白画布。这是我更新的代码。

function draw() {

  var canvas1 = document.getElementById('drawcanvas')
  var ctx = canvas1.getContext('2d');
  var canvas2 = document.getElementById('canvas');
  var ctx2 = canvas2.getContext('2d');


  ctx.fillStyle = '#f5f2d0';
  ctx.fillRect(0, 0, 205, 255);
  ctx.fillStyle = '#FFF';
  ctx.fillRect(0, 0, 200, 250);
  ctx.fillStyle = '#77d499';
  ctx.fillRect(5, 5, 195, 245);
  var img = new Image();
  img.src = 'Images/wine-icon-15966.png';
    img.addEventListener('load', function() {
    ctx.drawImage(img, 48.75, 20, 100, 200);
    var pattern = ctx2.createPattern(drawcanvas, 'repeat');
    ctx2.fillStyle = pattern;
    ctx2.fillRect(0, 0, canvas.width, canvas.height);
    ctx2.fill();

  }, false);

  ctx2.fillStyle = '#f5f2d0';
  ctx2.fillRect(0, 0, canvas.width, canvas.height);
}

无法使用重复图案在画布上重复图像

1 个答案: