Canvas使用createPattern设置repeat-y无显示，repeat正常问题求助

你的问题出在纹理尺寸和填充区域的匹配关系上：

当使用repeat-y时，Canvas的图案只会沿Y轴重复，X轴方向不会重复。你的纹理是4px宽，而填充的矩形是5px宽——这意味着X轴方向除了完整显示一次4px的纹理，剩下的1px没有可重复的内容（因为X轴不重复），会显示透明。再加上Canvas图案默认从左上角对齐，这1px的透明区域可能让你误以为整个纹理没显示；而repeat模式下X轴也会重复，所以5px宽度能显示一次完整纹理+1px的重复纹理，自然能看到内容。

解决方法有两种： #

1. 调整填充矩形宽度为纹理宽度的整数倍

直接把填充矩形的宽度改成4px（和纹理宽度一致），这样X轴刚好容纳完整纹理，repeat-y就能正常垂直重复：

ctx.fillStyle = ctx.createPattern(assets.grassRightTexture, 'repeat-y');
// 将宽度从5改为4，匹配纹理宽度
ctx.fillRect(dimensions.left + dimensions.width, dimensions.top, 4, dimensions.height);

2. 用临时Canvas扩展纹理（保留5px宽度）

如果必须保留5px的宽度，可以先创建一个临时Canvas，把纹理在X轴方向重复一次（变成8px宽），再用这个临时Canvas作为图案源，这样5px宽度就能显示部分重复的纹理：

// 创建临时Canvas处理纹理
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = 8; // 重复一次纹理宽度，覆盖5px的需求
tempCanvas.height = assets.grassRightTexture.height;
// 绘制两次纹理到临时Canvas
tempCtx.drawImage(assets.grassRightTexture, 0, 0);
tempCtx.drawImage(assets.grassRightTexture, 4, 0);
// 使用临时Canvas作为图案源
ctx.fillStyle = ctx.createPattern(tempCanvas, 'repeat-y');
ctx.fillRect(dimensions.left + dimensions.width, dimensions.top, 5, dimensions.height);

内容的提问来源于stack exchange，提问作者Syn