如何实现HTML Canvas图案沿对角线重复铺满整个页面？

嘿，我懂你想要的效果！原生的createPattern确实只支持repeat-x、repeat-y或者双向重复，没法直接搞对角线排列，但我们有两种简单的方法来实现这个需求，不用复杂的偏移计算~

方法一：扩展瓷砖画布（高效推荐） #

思路是创建一个更大的“瓷砖”，把你的原始图案在对角线方向上复制一次，然后用原生的repeat属性让这个大瓷砖铺满整个画布，这样看起来就像是原始图案在对角线重复了。

修改后的完整代码：

// 1. 创建并绘制原始图案（和你的代码一致）
var patternCanvas = document.createElement('canvas');
var patternContext = patternCanvas.getContext('2d');
patternCanvas.width = 350;
patternCanvas.height = 350;

patternContext.fillStyle = "orange";
patternContext.fillRect(0, 50, 150, 50);
patternContext.fillRect(50, 0, 50, 150);
patternContext.fillStyle = "black";
patternContext.fillRect(100, 100, 150, 50);
patternContext.fillRect(150, 50, 50, 150);
patternContext.fillStyle = "green";
patternContext.fillRect(200, 150, 150, 50);
patternContext.fillRect(250, 100, 50, 150);
patternContext.fillStyle = "darkred";
patternContext.fillRect(0, 100, 50, 150);
patternContext.fillRect(0, 150, 150, 50);
patternContext.fillStyle = "blue";
patternContext.fillRect(100, 150, 50, 150);
patternContext.fillRect(50, 200, 150, 50);
patternContext.fillStyle = "yellow";
patternContext.fillRect(200, 200, 50, 150);
patternContext.fillRect(150, 250, 150, 50);

// 2. 创建扩展的瓷砖画布，容纳两个对角线排列的原始图案
var tileCanvas = document.createElement('canvas');
var tileCtx = tileCanvas.getContext('2d');
tileCanvas.width = patternCanvas.width * 2;
tileCanvas.height = patternCanvas.height * 2;

// 在左上角和右下角各画一次原始图案
tileCtx.drawImage(patternCanvas, 0, 0);
tileCtx.drawImage(patternCanvas, patternCanvas.width, patternCanvas.height);

// 3. 用扩展瓷砖创建重复图案，铺满主画布
var canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext('2d');

var pattern = context.createPattern(tileCanvas, 'repeat');
context.fillStyle = pattern;
context.fillRect(0, 0, canvas.width, canvas.height);

为什么这能行？
当大瓷砖双向重复时，每一行的图案会相对于上一行偏移一个原始图案的宽度/高度，刚好形成对角线排列的视觉效果，浏览器会自动处理铺满逻辑，性能也更优。

方法二：手动循环绘制（直观灵活） #

如果不想扩展画布，也可以直接通过循环，在整个画布上逐个绘制原始图案，每次x和y方向都偏移一个图案的尺寸，这样也能实现对角线铺满。

代码示例：

// 1. 原始图案创建代码和上面一致，这里省略...

// 2. 手动循环绘制图案
var canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var context = canvas.getContext('2d');

// 计算需要绘制的行列数，多画一行一列避免边缘留白
var cols = Math.ceil(canvas.width / patternCanvas.width) + 1;
var rows = Math.ceil(canvas.height / patternCanvas.height) + 1;

// 遍历每个位置，绘制图案
for (var y = 0; y < rows; y++) {
  for (var x = 0; x < cols; x++) {
    // 每个图案的位置是 (x*350, y*350)，天然形成对角线排列
    context.drawImage(patternCanvas, x * patternCanvas.width, y * patternCanvas.height);
  }
}

这个方法的优势：不需要额外处理瓷砖画布，如果你需要调整偏移量（比如想让对角线更密集或更稀疏），直接修改偏移的数值就行，非常灵活。

两种方法都能达到你想要的对角线重复效果，选哪个看你的需求啦~

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