这是我的JavaScript代码:
for (i=0; i<5; i++){
context.moveTo(X, Y);
context.lineTo(X + length, Y);
context.stroke();
Y += space;
}
答案 0 :(得分:0)
<强>更新强> 它工作正常。如果这不起作用,你必须向我们提供更多细节。
((context) => {
var length = 200, X = 10, Y = 10, space = 10;
context.beginPath();
for (i = 0; i < 5; i++) {
context.moveTo(X, Y);
context.lineTo(X + length, Y);
Y += space;
}
context.stroke();
context.closePath();
})(document.querySelector("#canvas").getContext("2d"));
canvas {
background: #defcfa;
}
<canvas id="canvas" width="300" height="100"></canvas>
旧回答:
试试这样:
context.beginPath();
for (i = 0; i < 5; i++) {
context.moveTo(X, Y);
context.lineTo(X + length, Y);
Y += space;
}
context.stroke();
context.closePath();
答案 1 :(得分:0)
尝试Math.floor():坐标。
模糊图纸可能由带小数的坐标引起!
for (i=0; i<5; i++){
context.moveTo( Math.floor( X ), Math.floor( Y ) );
context.lineTo( Math.floor( X + length ) , Math.floor( Y ) );
context.stroke();
Y = Math.floor( Y + space );
}
无论如何..我自己无法重现此问题,因此可能是浏览器或其他内容。
另外,您使用的是ctx.scale,ctx.translate还是ctx.transform?