Question

我有一个我无法弄清楚的问题，这是我第一次看到它：我用画布制作网格，我将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();

感谢您的帮助。

Answer 1

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

但是，这可以通过向程序询问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();

我希望这有帮助！

画布讨厌的边界呈现

1 个答案: