在JS

Question

我有一个PNG图形，我想用作JS中画布的背景。它应以平铺格式显示。为此，我现在正在做这样的事情。

const ratioX = Math.ceil(canvas.width / image.width);
const ratioY = Math.ceil(canvas.height / image.height);
for (var x = 0; x < ratioX; x++) {
    for (var y = 0; y < ratioY; y++) {
        ctx.drawImage(image, x*image.width, y*image.height, image.width, image.height);
    }
}

它按预期工作，但性能可能会因为不进行每帧计算而得到改善，但缓冲了我图像的较大平铺版本。所以我正在寻找一种方法来创建这个图像作为Image类的实例或我可以用于drawImage()的任何其他类。

首先，我可能需要获取图像数据（因此每个像素的rgba信息）。我已经看过像here这样的方法，使用canvas的上下文，但我真的需要这样做吗？有没有更简单的方法？

第二步是从该数据中创建一个可绘制的图像对象。我该怎么做？

我很想看到一种等同于Java的bufferedImage.getRgb(x, y)和bufferedImage.setRgb(x, y, color)的方法。 JS中是否存在类似的内容？

Answer 1

如图here in W3Schools所示，您可以使用ctx <project> <modelVersion>4.0.0</modelVersion> <parent> <groupId>com.example</groupId> <artifactId>child2</artifactId> <version>1.0.0</version> </parent> <artifactId>child2a</artifactId> <!-- <artifactId>child2b</artifactId> --> <version>1.0.0</version> <dependencies> <!-- declare dependencies from parent dependency management --> <!-- without versionId (it's in the parent) --> <!-- declare dependencies which are module specific --> <!-- including versionId --> </dependencies> </project> 来实现您的目标：

createPattern

var ctx = document.getElementById("canvas").getContext("2d");
var img = new Image();
img.src = 'http://placehold.it/50/50'
img.onload = function() {
  var pat = ctx.createPattern(img, 'repeat');
  ctx.rect(0, 0, 350, 350);
  ctx.fillStyle = pat;
  ctx.fill();
};