2

キャンバス要素をいじってみましたが、次のコードは変換なしで正常に動作しますが、変換を入れると、赤いボックスはそれ自体の後ろに「尾」を描画します。奇妙なことに、その尻尾の色はボックスの色とは異なり、ブラウザごとに異なります (FF でははるかに暗い)。それは正常ですか？丸めたからだと思います。

function draw() {  
 var canvas = document.getElementById("canvas");
 g = canvas.getContext("2d");

 var x = 0;
 var y = 200;
 g.transform(.5,0,0,1,0,0);
 g.fillStyle = "rgb(200,0,0)";
 timer = setInterval(function() {
     if(x == 750) clearInterval(timer);
     g.clearRect(x,y,50,50);
     x ++;
     g.fillStyle = "rgb(200,0,0)";
     g.fillRect(x,y,50,50);
 }, 10);
}

<!DOCTYPE html>
<html>  
 <head>  
  <script type="text/javascript" src="test.js"></script>
 </head>  
 <body onload="draw()">
   <canvas id="canvas" width="800" height="600"></canvas>  
 </body>
</html>
4

1 に答える 1

0

スケーリングはにも適用されてclearRectいます。コールバック関数を呼び出すたびに、最後に描画されたrectは、X値が同じであるため、白い色でsetInterval完全に覆われていますが、赤いrectを再度描画するためにを呼び出すと、X値は1ずつ増加します。 。X軸は.5（1/2ピクセル）でスケーリングされるため、偶数の値では別のピクセルが必要ですが、奇数の値では「半分のピクセル」が必要になります。これは、ピクセルの2色が存在しないためです。 （白と赤）は、両方の色がそれぞれピクセルの半分を占めるそのピクセル上にあると想定されているため、滑らかな効果を得るためにブレンドされています。ほとんどの場合、これは良いと思いますが、この場合、たとえばそうではありません。clearRectfillRect

So let x be 2 (forget about the y axis here, kay?)
Have a rect from x to x+50 (transformed coords are 1, 26)
Clear rect from x to x+50 (1, 26)

We end up here with a white rect from 1 to 26, right?

add 1 to x
Have a rect from x to x+50 (1.5, 26.5)

Oops, there's no such pixel 1.5, 1 it is.
Pixel one is filled with white already, nobody ordered me to clear that but I have to fill with red this same pixel.

Solution = blend colors

ええ、あなたが見る尾は、赤と白で満たされた1列のピクセルの結果であり、完全に白で消えたり、完全に赤で残りの長方形と混ざり合ったりすることはありません。

解決策は次のとおりです。

g.clearRect(x-1,y,50,50);

を使用x-1すると、このピクセルの列をキャッチできます。

私がはっきりしていたことを願っています。

想定した色調の違いは、ブラウザごとのブレンディングの実装の違いによるものかもしれませんが、キャンバスアプリだけでなく、ブラウザによって同じ色の色調に違いがあることにいつも気づきました。

于 2012-07-06T01:16:16.027 に答える