最簡單的方法來平鋪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中的圖像

回答

相關問題