html5-canvas圖案大小波動

我有一個createPattern（）問題。第一i-定義畫布並傳遞作爲源的圖案，以在第二（較大的）帆布施加 - 正如在此演示由epistemex：html5-canvas圖案大小波動

http://jsfiddle.net/epistemex/dn7bvjh0/

這工作得很好。但是，當我多次調用函數時，每次更改「接收」畫布（'canvasContext'）的大小時，畫布的大小都會波動。畫布越大，圖案的元素越接近彼此。當畫布（大小不同）放在彼此旁邊時，這會造成節奏中斷，我正在尋找解決方案！

var unit = heightNow/2; 

var canvasPattern = document.createElement("canvas"); 
canvasPattern.width = unit; 
canvasPattern.height = unit; 
var pctx = canvasPattern.getContext("2d"); 

pctx.beginPath(); 
pctx.fillStyle = basicClrs1[woordNummer]; 
pctx.rect(0,0,unit,unit); 
pctx.fill(); 
pctx.beginPath(); 
pctx.fillStyle = basicClrs2[woordNummer]; 
pctx.rect(0,0,unit/2,unit/2); 
pctx.fill(); 
pctx.lineWidth = unit/4; 
pctx.stroke; 

var pattern = canvasContext.createPattern(canvasPattern,"repeat"); 
canvasContext.fillStyle = pattern; 
canvasContext.rect(0,0,widthNow,heightNow); 
canvasContext.translate(0,0,widthNow,heightNow); 
canvasContext.fill();

http://automatto.nl/img/pattern.png

來源

2016-11-18 jobot

你能提供一個完整的例子嗎？目前還不清楚heightNow和widthNow是什麼，我不確定你提供的所有代碼是否包含在函數中。我已經創建了[這個小提琴]（https://jsfiddle.net/k982dxa7/），但我不確定它是否與您正在做的相匹配。 – Jon

如果畫布的寬度和高度在任何時候都不同，那麼這可能會導致'節奏中斷'，因爲圖案的大小僅取決於高度。 – Jon

在每一頁加載新divs生成，具有不同的寬度和高度（'widthNow'和'heightNow'）。但都是精確的變量'unit'的大小 - 模式模塊的大小 - 所以我希望模式與高度寬度同步。情況並非如此，div越大，「next」模式模塊的意想不到的碎片在右側和底部都可見。 – jobot

發生問題，其中所述圖案的高度（和寬度） - unit - 不是一個整數。用於圖案的畫布將其高度和寬度向下舍入。當圖案被重複時，預期的次數結束時會留下幾個像素，這些像素被圖案的附加部分填充。

這種不需要的效果可以通過縮放來解決。

只需更換具有下列最後一行（調用填寫）：

var repetitionsX = Math.floor(widthNow/canvasPattern.width); 
var repetitionsY = Math.floor(heightNow/canvasPattern.height); 
var scalingFactorX = widthNow/(canvasPattern.width * repetitionsX); 
var scalingFactorY = heightNow/(canvasPattern.height * repetitionsY); 
canvasContext.save(); 
canvasContext.scale(scalingFactorX, scalingFactorY); 
canvasContext.fill(); 
canvasContext.restore();

來源

2016-11-20 18:34:54 Jon

謝謝喬恩，那就是解決問題！在這種情況下，我甚至可以通過照顧「單位」（其寬度和高度是倍數）來解決它（通過閱讀上面的註釋之後）始終是一個整數。但如果這是不可能的，縮放是很好的解決方法。人們應該只知道模式元素，比如圓圈在縮放之後可以是橢圓形。再次感謝，我非常感謝你的幫助！ – jobot

html5-canvas圖案大小波動

回答

相關問題