我正在尝试使用 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虽然不完美,但可能对我有用,但仍然不确定为什么会有轻微的差距!
最佳答案
要创建覆盖 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>
关于canvas - Canvas 中需要具有重复图案的连续剖面线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32201479/