canvas - Canvas 中需要具有重复图案的连续剖面线

Question

我正在尝试使用 Canvas 和动力学的组合来构建填充图案，但在尝试获得连续线时遇到了问题。

此 jsfiddle显示了到目前为止我所拥有的，但是因为我的重复模式是正方形，角会影响线条，我尝试使用 lineJoin 和 lineCap 属性，但似乎无法获得所需的结果。

有问题的主要代码是这样的:

var hatchPattern = document.getElementById("canvas")
var context = hatchPattern.getContext('2d');
context.strokeStyle = "#FF0000";
context.beginPath();
context.moveTo(0, 20);
context.lineTo(20, 0);
context.lineWidth = 5;
context.stroke();
context.closePath();

任何人都可以帮忙吗？

更新:

我又创建了一个 jsfiddle虽然不完美，但可能对我有用，但仍然不确定为什么会有轻微的差距!

Answer 1

要创建覆盖 Canvas 的对角线，您可以创建如下图案:

您必须用三角形填充左上角和右下角。当在图案中重复时，这些三角形将填充由中心线到达右上角和左下角的点引起的斜角



然后createPattern(yourPattern,"repeat")将像这样图案填充 Canvas :



这是示例代码和显示更细线的演示:

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

var p = document.createElement("canvas")
p.width=32;
p.height=16;
var pctx=p.getContext('2d');

var x0=36;
var x1=-4;
var y0=-2;
var y1=18;
var offset=32;

pctx.strokeStyle = "#FF0000";
pctx.lineWidth=2;
pctx.beginPath();
pctx.moveTo(x0,y0);
pctx.lineTo(x1,y1);
pctx.moveTo(x0-offset,y0);
pctx.lineTo(x1-offset,y1);
pctx.moveTo(x0+offset,y0);
pctx.lineTo(x1+offset,y1);
pctx.stroke();

ctx.fillStyle=ctx.createPattern(p,'repeat');
ctx.fillRect(0,0,canvas.width,canvas.height);

#canvas{border:1px solid red;}

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