HTML5 Canvas - 创建剥离 Canvas 与 lineWidth 和 createPattern()

Question

我想用 html5Canvas 创建 strippedPattern，其中 strippedPattern 的线条粗细可以使用属性 lineWidth 进行配置。 After I read this HTML5 Canvas and Line Width , I understood that for coord x,y from moveTo()/lineTo(), I need to add like 2.5 for the ctx.lineWidth =5 or maybe create a formula based on thinckness like http ://www.coding-dude.com/wp/javascript/drawing-simple-line-patterns-using-html5-canvas/ 。 但我不知道如何改变这些坐标的值，所以图案仍然像右边一样被剥离，而不是像左边那样随机

下面是我的代码，有人可以告诉我应该如何计算坐标x，y吗？

 function createStrippedPattern(color) { const pattern = document.createElement('canvas'); // create a 10x10 px canvas for the pattern's base shape pattern.width = 10; pattern.height = 10; // get the context for drawing const context = pattern.getContext('2d'); context.strokeStyle = color; context.lineWidth = 5; // draw 1st line of the shape context.beginPath(); context.moveTo(2, 0); context.lineTo(10, 8); context.stroke(); // draw 2st line of the shape context.beginPath(); context.moveTo(0, 8); context.lineTo(2, 10); context.stroke(); return context.createPattern(pattern, 'repeat'); }; function fillWithPattern(targetCanvas, patternCanvas){ const ctx = targetCanvas.getContext('2d', { antialias: false, depth: false }); const width = targetCanvas.width; const height = targetCanvas.height; ctx.fillStyle = patternCanvas; ctx.fillRect(0, 0, width, height); return targetCanvas; } fillWithPattern(document.getElementById("targetCanvas"), createStrippedPattern("red"));

 <canvas id="targetCanvas" width=30 height=30></canvas>

Answer 1

代码逻辑问题

图案的大小需要与线条的斜率相匹配。 必须扩展该大小以允许行之间的设置间距。

您的代码具有与您绘制的任何一条线的斜率都不匹配的固定大小。

你画的线都在不同的方向。 你永远不会让他们创建一个可重复的模式。

您给出的代码太含糊，我无法理解您希望实现的目标，因此该示例添加了一些约束，认为我最好的猜测是您的要求。

花木条纹图案

下面示例中的 function 创建了条纹可重复（波浪形）图案。

function createStripedPattern(lineWidth, spacing, slope, color)需要 4 个 arguments。

• lineWidth要绘制的线条的宽度

• 行spacing 。 例如，如果 lineWidth 为 5 且间距为 10，则线之间的空间与线的宽度相同。

• slope线的坡度，例如 45 度坡度是 1。我只测试了值 >= 1，不确定它是否会低于 1。

  我也没有测试过非常大的斜坡。 该示例的重点是展示如何在图案上绘制线条以重复无孔。

• color要绘制的线条的颜色。

function 通过创建符合 arguments 给出的约束的 canvas 来工作。 然后它从左上角到右下角画一条线。 这会在右上角和左下角的重复模式中留下一个间隙。

为了填充缺失的像素，再画两条线。 一个通过右上角，另一个通过左下角。

请注意，您也可以将 canvas 复制到自身（偏移到角落）以填充缺失的角落像素。 对于像素艺术类型的图案，这可能是优选的。

请注意，canvas 大小为 integer 值，线条以亚像素精度呈现。 对于非常小的输入值，随着 canvas（整数）像素大小和所需（浮点）大小之间的相对误差变大，将会出现伪影

例子

该示例包含 function 以创建上述模式，然后呈现一些示例。

第一个 canvas 具有嵌入图案，每个图案增加线宽将保持间距和斜率不变。

第二个 canvas 仅填充固定 lineWidth 为 4，间距为 8，坡度为 3

 function createStripedPattern(lineWidth, spacing, slope, color) { const can = document.createElement('canvas'); const len = Math.hypot(1, slope); const w = can.width = 1 / len + spacing + 0.5 | 0; // round to nearest pixel const h = can.height = slope / len + spacing * slope + 0.5 | 0; const ctx = can.getContext('2d'); ctx.strokeStyle = color; ctx.lineWidth = lineWidth; ctx.beginPath(); // Line through top left and bottom right corners ctx.moveTo(0, 0); ctx.lineTo(w, h); // Line through top right corner to add missing pixels ctx.moveTo(0, -h); ctx.lineTo(w * 2, h); // Line through bottom left corner to add missing pixels ctx.moveTo(-w, 0); ctx.lineTo(w, h * 2); ctx.stroke(); return ctx.createPattern(can, 'repeat'); }; function fillWithPattern(canvas, pattern, inset = 0) { const ctx = canvas.getContext('2d'); ctx.clearRect(inset, inset, canvas.width - inset * 2, canvas.height - inset * 2); ctx.fillStyle = pattern; ctx.fillRect(inset, inset, canvas.width - inset * 2, canvas.height - inset * 2); return canvas; } fillWithPattern(targetCanvas, createStripedPattern(2, 6, 2, "#000")); fillWithPattern(targetCanvas, createStripedPattern(3, 6, 2, "#000"), 50); fillWithPattern(targetCanvas, createStripedPattern(4, 6, 2, "#000"), 100); fillWithPattern(targetCanvas1, createStripedPattern(4, 8, 3, "#000"));

 <canvas id="targetCanvas" width="300" height="300"></canvas> <canvas id="targetCanvas1" width="300" height="300"></canvas>