画布上的变换导致奇怪的行为

我用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>

来源

2012-07-05 SpiderPig

btw。变换（.5,0,0,1,0,0）与比例（0.5,1）相同。尝试缩放（0.99,1）以获得有趣的效果。 – SpiderPig 2012-07-05 19:48:18

缩放被applyed到clearRect为好。在每次调用setInterval回调函数时，由于X值仍然相同，因此0123'完全覆盖了最后绘制的矩形，但是当您调用fillRect以再次绘制红色矩形时，X值为由于你的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

呀，所以你看到的尾巴是充满红+白，不完全白desapear，也不是完全的红色与矩形的其余部分混合像素的1列的结果。

一个解决办法是：

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

使用x-1你就可以赶上像素此列。

希望我很清楚。

我认为音色的差异是由于在每个浏览器中实现混合的差异，但我总是注意到，根据浏览器的不同，相同颜色的色调不仅在画布上的应用。

来源

2012-07-06 01:16:16 Delta

画布上的变换导致奇怪的行为

回答

相关问题