Question

我遇到了createPattern（）的问题。首先，我定义一个画布并将其作为模式的源传递，以应用于第二个（更大的）画布上 - 就像epistemex的演示一样：

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

这很好用。但是，当我多次调用下面的函数时，每次都会改变“接收”的大小。 canvas（＆＃39; canvasContext＆＃39;），画布的大小会波动。画布越大，图案的元素越接近彼此。当画布（不同尺寸）放在彼此旁边时，这会在节奏上产生中断，我正在寻找解决方案！

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();

html5-canvas图案大小波动

1 个答案: