js canvas 创建模式重复问题

Question

目前将其绘制到 canvas 上：

我想使用仅在红色矩形所在的 Y 轴上重复的纹理。

但是，在绘制纹理时，指定repeat-y时没有任何显示。 但是，当重复值是repeat时，它会起作用。

ctx.fillStyle = ctx.createPattern(assets.grassRightTexture, 'repeat-y');
ctx.fillRect(dimensions.left + dimensions.width, dimensions.top, 5, dimensions.height);

assets.grassRightTexture是一个预加载的 img 元素，具有 4px x 32px sprite。

不确定我是否做错了什么，但在阅读 moz canvas 文档时我没有注意到任何事情。

谢谢你。

Answer 1

CanvasPattern object 始终与上下文的当前转换矩阵 (CTM) 相关，而不是与您希望绘制的形状相关。

因此，在这里，由于您确实从width设置为 4px 的<img>元素创建图案，因此您的CanvasPattern实例将仅覆盖从坐标 (0, -∞) 到 (4, ∞) 的矩形。
由于您绘制的矩形没有覆盖该区域，因此您正在填充透明像素。

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // prepare the CanvasPattern canvas.width = 4; canvas.height = 32; ctx.fillStyle = "red"; ctx.fillRect(0, 0, canvas.width, canvas.height); const pattern = ctx.createPattern(canvas, "repeat-y"); // try to use the pattern canvas.width = 300; canvas.height = 150; ctx.fillStyle = pattern; ctx.fillRect(24, 50, 50, 50); // doesn't draw anything ctx.strokeRect(24, 50, 50, 50); // to show we did draw something setTimeout(() => { ctx.fillRect(0, 75, 50, 50); // doesn't draw anything ctx.strokeRect(0, 75, 50, 50); // to show we did draw something }, 1000);

 <canvas></canvas>

为了克服这个问题，您可以通过setTransform()方法转换您的CanvasPattern object，

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // prepare the CanvasPattern canvas.width = 4; canvas.height = 32; ctx.fillStyle = "red"; ctx.fillRect(0, 0, canvas.width, canvas.height); const pattern = ctx.createPattern(canvas, "repeat-y"); // try to use the pattern canvas.width = 300; canvas.height = 150; ctx.fillStyle = pattern; // we translate the CanvasPattern so that our shape is covered // setTransform accepts a DOMMatrixInit dictionnary // `e` represents the x-axis translate pattern.setTransform({e: 24}); ctx.fillRect(24, 50, 50, 50); ctx.strokeRect(24, 50, 50, 50);

 <canvas></canvas>

或者您可以使用 2 个不同的 CTM 在两个步骤中绘制您的上下文，以跟踪形状和绘制它。

 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // prepare the CanvasPattern canvas.width = 4; canvas.height = 32; ctx.fillStyle = "red"; ctx.fillRect(0, 0, canvas.width, canvas.height); const pattern = ctx.createPattern(canvas, "repeat-y"); // try to use the pattern canvas.width = 300; canvas.height = 150; ctx.fillStyle = pattern; // we trace at identity CTM ctx.rect(24, 50, 50, 50); // we move only the fillStyle & strokeStyle ctx.translate(24, 0); ctx.fill(); ctx.stroke();

 <canvas></canvas>

尽管Firefox 中存在一个错误，导致第二个选项在那里失败。