为什么HTML 5画布中没有矩形黑色?

时间:2012-05-17 04:51:50

标签: html5 canvas html5-canvas

下面是一个带有canvas标签的简单HTML 5页面。在画布上,矩形以黑色绘制,并显示黑色文本。但由于某种原因,矩形实际上是灰色的。为了使它变黑,我必须在它上面画2到3次。这似乎表明存在某种α问题,但我不知道为什么会这样。

另外,线宽看起来比1px宽......?

有谁能告诉我我做错了什么?

function draw()
{
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext)
    {
        var ctx = canvas.getContext('2d');
        //ctx.globalAlpha = 1;
        //ctx.globalCompositeOperation = "source-over";

        ctx.lineWidth = "1";
        ctx.strokeStyle = "#000000";
        ctx.strokeRect(100, 100, 50, 50); //appears grey

        ctx.font = "22px Arial";
        ctx.fillStyle = "#000000";
        ctx.fillText("test", 120, 120); //appears black as expected
    }
}

1 个答案:

答案 0 :(得分:7)

你的线看起来很胖和灰色,因为它在绘制时会重叠像素 - 即你的线条跨越两个像素。如果您将代码更改为:

ctx.strokeRect(100.5, 100.5, 50, 50);

你会看到一条坚实的黑线。

enter image description here

有关详细信息,请参阅此页面:http://diveintohtml5.info/canvas.html#paths