我用在不同画布上创建的图案画线。
我正在翻译和缩放上下文矩阵，并创建另一个模式以实现每一行都将完全从模式的开头开始。（我们知道，模式是从上下文的开头为所有上下文区域重复创建的，并且不依赖于图形）
在大多数情况下，我已经做到了，如下所示。
每行代表一个比例尺。并在不同的Y值上绘制许多线。每条线应沿X轴重复显示红色圆圈。它适用于许多规模。
问题出在规模1.6。第三行线。正如我们所看到的，随着Y值的增长，该行中的线条没有很好地图案化，而且起点也不正确。
我认为这是一些浮点问题。但是我找不到问题。
var ctx = demo.getContext('2d'),
pattern,
offset = 0;
/// create main pattern
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(8, 8, 7, 0, Math.PI * 2);
ctx.fill();
runScale(1, 0);
runScale(1.5, 120);
runScale(1.6, 240);
runScale(2, 360);
runScale(3, 480);
function runScale(scale, firstPntX) {
var newCanvasSize = {
width: demo.width * scale,
height: demo.height * scale
};
demo2.width = Math.round(newCanvasSize.width);
demo2.height = Math.round(newCanvasSize.height);
var firstPnt = {
x: firstPntX
};
var offsetPnt = {
x: 0,
y: (newCanvasSize.height / 2)
};
var ctx2 = demo2.getContext('2d');
var pt = ctx2.createPattern(demo, 'repeat');
ctx = demo3.getContext('2d');
for (var i = 20; i < 1000; i += (demo2.height + 10)) {
drawLines(i);
}
function drawLines(y) {
firstPnt.y = y;
demo2.width = demo2.width;
ctx2.fillStyle = pt;
var offsets = [firstPnt.x, y - demo2.height / 2];
ctx2.translate(offsets[0], offsets[1]);
ctx2.scale(scale, scale);
ctx2.fillRect(-offsets[0] / scale, -offsets[1] / scale, demo2.width / scale, demo2.height / scale);
ctx.lineWidth = newCanvasSize.height;
pattern = ctx.createPattern(demo2, 'repeat');
ctx.beginPath();
ctx.moveTo(firstPnt.x, firstPnt.y);
ctx.lineTo(firstPnt.x + 100, firstPnt.y);
ctx.strokeStyle = 'lightgreen';
ctx.stroke();
ctx.strokeStyle = pattern;
ctx.stroke();
}
}canvas {
border: 1px solid #000
}<canvas id="demo" width=16 height=16></canvas>
<canvas id="demo2"></canvas>
<canvas id="demo3" width=600 height=400></canvas>经过一整天的努力，我终于决定在这里发布这个问题。
现在，一个小时后，我自己找到了解决方案。
我已决定不为了论坛而将其删除。
解决方案是简单地更改偏移量。
更改此行
var offsets = [firstPnt.x, y - demo2.height / 2];
到这条线
var offsets = [firstPnt.x % demo2.width,firstPnt.y % demo2.height - demo2.height / 2];
var ctx = demo.getContext('2d'),
pattern,
offset = 0;
/// create main pattern
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(8, 8, 7, 0, Math.PI * 2);
ctx.fill();
runScale(1, 0);
runScale(1.5, 120);
runScale(1.6, 240);
runScale(2, 360);
runScale(3, 480);
function runScale(scale, firstPntX) {
var newCanvasSize = {
width: demo.width * scale,
height: demo.height * scale
};
demo2.width = Math.round(newCanvasSize.width);
demo2.height = Math.round(newCanvasSize.height);
var firstPnt = {
x: firstPntX
};
var offsetPnt = {
x: 0,
y: (newCanvasSize.height / 2)
};
var ctx2 = demo2.getContext('2d');
var pt = ctx2.createPattern(demo, 'repeat');
ctx = demo3.getContext('2d');
for (var i = 20; i < 1000; i += (demo2.height + 10)) {
drawLines(i);
}
function drawLines(y) {
firstPnt.y = y;
demo2.width = demo2.width;
ctx2.fillStyle = pt;
var offsets = [firstPnt.x % demo2.width, firstPnt.y % demo2.height - demo2.height / 2];
ctx2.translate(offsets[0], offsets[1]);
ctx2.scale(scale, scale);
ctx2.fillRect(-offsets[0] / scale, -offsets[1] / scale, demo2.width / scale, demo2.height / scale);
ctx.lineWidth = newCanvasSize.height;
pattern = ctx.createPattern(demo2, 'repeat');
ctx.beginPath();
ctx.moveTo(firstPnt.x, firstPnt.y);
ctx.lineTo(firstPnt.x + 100, firstPnt.y);
ctx.strokeStyle = 'lightgreen';
ctx.stroke();
ctx.strokeStyle = pattern;
ctx.stroke();
}
}canvas {
border: 1px solid #000
}<canvas id="demo" width=16 height=16></canvas>
<canvas id="demo2"></canvas>
<canvas id="demo3" width=600 height=400></canvas>感谢您的阅读：D
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句