3

以下は、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
    }
}
4

1 に答える 1

7

描画時にピクセルが重なり合っているため、線が太くて灰色に見えます。つまり、線が 2 つのピクセルにまたがっています。コードを次のように変更した場合:

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

黒い実線が表示されます。

ここに画像の説明を入力

詳細については、このページを参照してください: http://diveintohtml5.info/canvas.html#paths

于 2012-05-17T05:07:32.707 に答える