4

私はJavascriptとHTML5を使い始めたばかりなので、本当にばかげた間違いを犯している可能性が非常に高い. 実際、これですべてであり、これが簡単に修正されることを願っています。

これが私が得ている出力です:

奇妙で間違ったイメージ（自分で試してみてください！）

私がやりたいことは、両方の色が独自のものである灰色の四角形の上に青い四角形を描くことです。このブレンディングがデフォルトである理由について正直に混乱しています（私のマシンでChromeを使用しています）。

これが最小限の作業例です（これも私のマシン用です）：

(html)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Simple Canvas Game</title>
    </head>
    <body>
        <script src="js/game.js"></script>
    </body>
</html>

(javascript、これは game.js です)

//set up the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Draw everything
var render = function () {
    ctx.clearRect(50, 50, 100, 100);

    ctx.fillStyle = "rgb(240, 240, 240)";
    ctx.fillRect(0, 0, 100, 100);

    ctx.strokeStyle="rgb(0, 0, 255)";
    ctx.strokeRect(20,20,150,100);
}

setInterval(render, 10);
4

2 に答える 2

9

これはブレンドではありません。ストロークの幅が1ピクセルで、キャンバスの座標は正方形の座標であり、線は正方形の間にあります。線はピクセル間を行き来し、アンチエイリアス処理されます。ストロークをピクセルに揃えたい場合は、（100,100）ではなく（99.5,99.5）のような座標を使用する必要があります。説明するのは難しいですが、利用可能なドキュメントはたくさんあります。

長い話を短くするには、描画コード全体を0.5,0.5だけ変換する必要があります。次のようなものを試してください：

ctx.save();
ctx.translate(0.5,0.5);

ctx.clearRect(50, 50, 100, 100);

ctx.fillStyle = "rgb(240, 240, 240)";
ctx.fillRect(0, 0, 100, 100);

ctx.strokeStyle="rgb(0, 0, 255)";
ctx.strokeRect(20,20,150,100);
ctx.restore();
于 2013-02-09T15:06:11.267 に答える
0

globalCompositeOperationオプションをチェックしてください。"lighter"デフォルトが欲しいのに、に設定したようです"source-over"。

于 2013-02-09T15:02:34.297 に答える