我正在向一个HTML 5 2D画布绘制五条水平线:
var canvas_ctx = my_canvas.getContext("2d");
canvas_ctx.lineWidth = 0.5;
canvas_ctx.strokeStyle = "black";
{
let line_x = 0;
let line_length = canvas_ctx.width;
let offset = 5;
let numLines = 5;
let numYincrement = 10;
for (let i=0;i<numLines * numYincrement;i+=numYincrement) {
//canvas_ctx.beginPath();
canvas_ctx.moveTo(line_x,i + offset);
canvas_ctx.lineTo(line_length,i + offset);
canvas_ctx.stroke();
//canvas_ctx.closePath();
}
}
理想情况下,应该有5条黑色的线。但实际上,每一行的颜色似乎都会随着新行的添加而逐渐变淡(就像是一个渐变效果!),所以第五行是灰色的。如果我取消注释canvas_ctx.beginPath();
和 canvas_ctx.closePath();
,所有的线都会变成灰色。为什么会这样呢?