html5-canvas图案大小波动

Question

我对 createPattern() 有疑问。首先，我定义了一个画布并将其作为模式的源传递，以应用于第二个（更大的）画布 - 就像在 epistemex 的这个演示中一样：

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

Answer 1

问题出现在图案高度（和宽度） - 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();