1

我有一个我无法弄清楚的问题，这是我第一次看到它：我用画布制作了一个网格，我将 1px 黑色边框设置为 globalAlpha 设置为 1，我的边框以 2px 宽度和灯光渲染透明度。我从来没有在画布上遇到过这个问题，我用 chrome 和 firefox 对其进行了测试，结果相同。

这里的小提琴：http: //jsfiddle.net/EXE4K/

代码 ：

var size = 10, case_size = 18, canvas_size = 180, ctx = document.getElementById('canvas').getContext("2d");

ctx.beginPath();

for(var i = 0; i <= size; i++) {

    var d = i * case_size;

    ctx.moveTo(0, d);
    ctx.lineTo(canvas_size, d);

   ctx.moveTo(d, 0);
    ctx.lineTo(d, canvas_size);

}

ctx.closePath();

ctx.globalAlpha = 1;

ctx.lineWidth = 1;
ctx.strokeStyle = 'black';

ctx.stroke();

感谢帮助。

4

1 回答 1

2

同样的透明度问题也发生在我身上。

但是，这可以通过要求程序 ctx.stroke(); 来解决。两次。完成代码将如下所示：

var size = 10, case_size = 18, canvas_size = 180, ctx = document.getElementById('canvas').getContext("2d");
ctx.beginPath();
for(var i = 0; i <= size; i++) {

var d = i * case_size;

ctx.moveTo(0, d);
ctx.lineTo(canvas_size, d);

ctx.moveTo(d, 0);
ctx.lineTo(d, canvas_size);

}

ctx.closePath();

ctx.globalAlpha = 1;

ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.stroke();

我希望这有帮助！

于 2017-01-02T04:14:11.727 回答