如何在Canvas中实现边缘清晰的斜线填充矩形？

你用线性渐变做斜线填充时，因为渐变本身是颜色平滑过渡的特性，相邻色标之间会自动插值产生模糊边缘，所以没法得到清晰的斜线效果。这里给你两种可行的方法：

方法一：使用createPattern生成清晰斜线纹理 #

先创建一个小型的canvas，在上面绘制出单组清晰的斜线，再把这个canvas作为填充图案应用到目标矩形上，这样就能得到无限重复的清晰斜线填充。

完整代码示例：

<canvas id="canvas"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 1. 创建一个小canvas用来绘制斜线纹理
var patternCanvas = document.createElement('canvas');
patternCanvas.width = 10; // 斜线间距，数值越小斜线越密
patternCanvas.height = 10;
var patternCtx = patternCanvas.getContext('2d');

// 2. 在小canvas上绘制清晰的斜线
patternCtx.strokeStyle = 'red';
patternCtx.lineWidth = 2;
patternCtx.beginPath();
patternCtx.moveTo(0, 0);
patternCtx.lineTo(10, 10);
patternCtx.stroke();

patternCtx.strokeStyle = 'green';
patternCtx.beginPath();
patternCtx.moveTo(0, 10);
patternCtx.lineTo(10, 0);
patternCtx.stroke();

// 3. 生成填充图案并应用到目标矩形
var pattern = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = pattern;

// 绘制目标矩形并填充
ctx.beginPath();
ctx.rect(50, 50, 80, 80);
ctx.fill();

// 描边
ctx.strokeStyle = "purple";
ctx.lineWidth = 4;
ctx.stroke();
</script>

方法二：直接绘制平行斜线路径 #

通过循环绘制一系列平行的斜线，然后将这些斜线和矩形边界组合，也能得到清晰的双色斜线效果：

<canvas id="canvas"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 矩形参数
var x = 50, y = 50, width = 80, height = 80;
// 斜线间距和宽度
var lineSpacing = 10;
var lineWidth = 2;

ctx.lineWidth = lineWidth;

// 计算斜线的起始点，覆盖整个矩形范围
var startX = x - height;
var endX = x + width;

// 循环绘制平行斜线
for (var i = startX; i < endX; i += lineSpacing) {
    ctx.beginPath();
    ctx.moveTo(i, y);
    ctx.lineTo(i + height, y + height);
    ctx.strokeStyle = i % (lineSpacing * 2) === 0 ? 'green' : 'red';
    ctx.stroke();
}

// 绘制矩形边框
ctx.beginPath();
ctx.rect(x, y, width, height);
ctx.strokeStyle = "purple";
ctx.lineWidth = 4;
ctx.stroke();
</script>

这两种方法都能避免渐变带来的模糊边缘，你可以根据需求调整斜线的间距、宽度和颜色。

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