最简单的方法来平铺JS中的图像

我有一个PNG图形，我想在JS中用作我的画布背景。它应该以平铺格式显示。为此，我目前正在做这样的事情。最简单的方法来平铺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中是否存在这样的事情？

来源

2016-11-14 Froxx

你尝试过http://www.w3schools.com/TAGS/tryit.asp?filename = tryhtml5_canvas_createpattern？ – nicooga

检出：http://stackoverflow.com/questions/14121719/html5-canvas-background-image-repeat – JonSG

如图here in W3Schools你可以用CTX 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(); 
 
};

<canvas id='canvas' width=350 height=350/>

来源

2016-11-14 15:16:42 nicooga

看起来像我有错误的搜索关键字。我其实并不知道'createPattern（）'，'fillStyle'可以具有其他属性而不是颜色。非常感谢，解决了我的问题。 – Froxx

最简单的方法来平铺JS中的图像

回答

相关问题