2

我使用了 canvas 元素，下面的代码在没有变换的情况下也能正常工作，但是当我放入变换时，红色框在自身后面画了一个“尾巴”。奇怪的是，尾巴的颜色与盒子的颜色不同，而且它也因浏览器而异（在 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。每次调用setInterval回调函数时，最后绘制的矩形都被clearRect白色完美覆盖，因为 X 值仍然相同，但是当您调用fillRect以再次绘制红色矩形时，X 值会增加 1 . 由于您的 X 轴按 0.5（半个像素）缩放，因此在偶数值上它需要另一个像素，但在奇数值上它应该占用“半个像素”，因为这不存在像素的两种颜色（白色和红色）混合以尝试获得平滑效果，因为两种颜色都应该在该像素上，每个像素占一半。我想这在大多数情况下是好的，但在这种情况下，例如它不是。

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 回答