| 

.NET C# Java Javascript Exception

1
Wieso funktioniert "clearRect(0, 110, 100, 100);" bei meinem rotierenden Quadrat nicht sauber? Es bleibt immer ein hässlicher grauer Rahmen übrig.

Hier mein Beispielcode:
<html>
<head>
<style type="text/css">
<!--
#canv
{
border:1px solid red;
}
-->
</style>
<script type="text/javascript">

var myIntervalId;
var counter = 0;
var context;

function runAnimation(){

var meineCanvas = document.getElementById('canv');
if(meineCanvas.getContext){
context = meineCanvas.getContext('2d');
}

myIntervalId = setInterval(drawCanvas,1);
}

function drawCanvas(){

context.clearRect(counter-1, 110, 100, 100);

var tempCounter = counter-1
context.rotate(DegreeToRad(tempCounter));
context.clearRect(0, 110, 100, 100);
context.rotate(DegreeToRad(-tempCounter));

context.fillStyle = 'rgba(220, 220 , 220,1)';
context.fillRect(0, 0, 100, 100);

context.fillStyle = 'rgba(20, 20 , 20,1)';
context.fillRect(110, 0, 100, 100);

context.fillStyle = 'rgba(220, 220 , 220, 1)';
context.fillRect(counter, 110, 100, 100);

context.fillStyle = 'rgba(20, 20 , 20, 1)';
context.rotate(DegreeToRad(counter));
context.fillRect(0, 110, 100, 100);
context.rotate(DegreeToRad(-counter));

if(counter == 360){
clearInterval(myIntervalId);
}
else{
counter++;
}

}

function DegreeToRad(x){
return (x*Math.PI)/180;
}


</script>
</head>
<body onload="runAnimation()" >
<h1>Canvas Testpage</h1>
<canvas id="canv" width="230" height="230" >Ihr Browser kann diese Grafik nicht darstellen.</canvas>
</body>
</html>
News:
02.03.2011
Seppium 21 3
1 Antwort
0
Die Linien werden durch Anti-Aliasing nicht genau im Rechteck gezeichnet, sondern auch ein bisschen drüber. Beim Löschen wird aber nur innerhalb des Rechtecks gelöscht. Wenn Du den ganzen Canvas löschst, funktioniert es unter Safari/Mac:

context.clearRect(0, 0, 230, 230);
03.03.2011
theorist 494 6

Stelle deine Html-Frage jetzt!