Canvas 画布边界渲染

Canvas 画布边界渲染,canvas,border,Canvas,Border,我有一个无法解决的问题,这是我第一次看到它:我用画布制作了一个网格,我将1px黑色边框和globalAlpha设置为1,我的边框以2px宽度渲染,并具有光透明度。我从来没有在canvas上遇到过这样的问题,我用chrome和firefox对它进行了测试,结果是一样的 这里是小提琴: 代码: var size = 10, case_size = 18, canvas_size = 180, ctx = document.getElementById('canvas').getContext("2d

我有一个无法解决的问题,这是我第一次看到它:我用画布制作了一个网格,我将1px黑色边框和globalAlpha设置为1,我的边框以2px宽度渲染,并具有光透明度。我从来没有在canvas上遇到过这样的问题,我用chrome和firefox对它进行了测试,结果是一样的

这里是小提琴:

代码:

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();
var size=10,case_size=18,canvas_size=180,ctx=document.getElementById('canvas').getContext(“2d”);
ctx.beginPath();

对于(var i=0;i,同样的透明度问题也发生在我身上

但是,只要让程序两次调用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();
var size=10,case_size=18,canvas_size=180,ctx=document.getElementById('canvas').getContext(“2d”);
ctx.beginPath();

对于(var i=0;i
ctx.translate(0.5,0.5)
在开始绘制之前:谢谢,它可以工作。但是为什么我需要这样做?它应该在初始比例下工作,不是吗?出于某种原因,画布默认绘制偏移半像素的像素,因此我们需要通过移动它们0.5像素来补偿它,使一个像素与真实像素完全重叠。否则,两个“半”像素像素将被亚像素化,这将导致你看到的两个灰度像素(因为我们不能在屏幕上真正画出半像素)。好吧,我从来没有想到…谢谢你,伙计。可能是重复的