transformer sur toile provoque un comportement étrange

J'ai joué avec l'élément canvas et le code suivant fonctionne bien sans la transformation mais quand je mets la transformation, la boîte rouge dessine une "queue" derrière elle-même. Etrangement, la couleur de cette queue est différente de celle de la boîte et elle est également différente du navigateur au navigateur (beaucoup plus sombre en FF). Est-ce normal? Je suppose que c'est dû à l'arrondissement.transformer sur toile provoque un comportement étrange

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>

Source

2012-07-05 SpiderPig

btw. transform (.5,0,0,1,0,0) est la même que l'échelle (0,5,1). Essayez l'échelle (0,99,1) pour obtenir un effet intéressant. – SpiderPig

la mise à l'échelle est en cours applyed au clearRect ainsi. À chaque appel à la fonction de rappel setInterval, le dernier rectangle dessiné est parfaitement couvert par le clearRect avec une couleur blanche puisque la valeur X est toujours la même, mais lorsque vous appelez le fillRect pour dessiner le rectangle rouge, la valeur X est incrémenté de 1. Puisque votre axe X est redimensionné par .5 (un demi pixel), à des valeurs paires, il prend un autre pixel mais sur des valeurs impaires, il est supposé prendre "un demi pixel", puisque les deux couleurs n'existent pas des pixels (blanc et rouge) sont mélangés pour essayer d'obtenir un effet lisse puisque les deux couleurs sont censées être sur ce pixel en prenant la moitié du pixel chacune. Ce que je suppose est bon la plupart du temps mais dans ce cas par exemple ce n'est pas le cas.

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

Ouais, donc la queue que vous voyez est le résultat d'une colonne de pixels qui sont remplis avec le rouge + blanc, pas complètement blanc desapear ni complètement rouge pour mélanger avec le reste du rect.

Une solution serait:

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

vous utilisez x-1 capable d'attraper cette colonne de pixels.

J'espère avoir été clair. La différence sur la tonalité que je suppose est due aux différences dans la mise en œuvre de la fusion dans chaque navigateur, peut-être, mais j'ai toujours remarqué quelques différences dans les tons de la même couleur en fonction du navigateur, non seulement sur des applications de toile.

Source

2012-07-06 01:16:16 Delta

transformer sur toile provoque un comportement étrange

Répondre

Questions connexes