为什么 HTML 5 画布中的矩形不是黑色的？答案

【问题标题】：Why isn't rectangle black in HTML 5 canvas?为什么 HTML 5 画布中的矩形不是黑色的？
【发布时间】：2012-05-17 18:05:19
【问题描述】：

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

另外，线宽看起来比 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
    }
}

【问题讨论】：

标签： html canvas html5-canvas

【解决方案1】：

您的线条在绘制时看起来很粗且呈灰色，因为它是重叠的像素 - 即您的线条跨越两个像素。如果您将代码更改为：

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

您会看到一条黑色实线。

有关更多信息，请参阅此页面：http://diveintohtml5.info/canvas.html#paths

【讨论】：

啊啊啊！我发现这有点奇怪，因为我使用的所有其他绘图系统都是以像素为单位指定的，即 (1,1) 表示像素 1,1 而不是位置 1,1，它没有分配一个像素.哦，好吧，必须符合规范。感谢您的回答。