Animation d'une balle

Version imprimable

Bonjour

je souhaite faire bouger une balle dans mon canvas, cependant lors du deplacement cela laisse une traînée derriere. Quand je remplace le cercle par un carre cela marche très bien

voici Mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 
                     dessin
               </title>
 
	</head>
    <body>
        <canvas id="dessin" width="600" height="600" style="border-style:solid;"></canvas>
 
 
        <script> 
            
        
  var dessin=document.getElementById('dessin');
 
 
    ctx=dessin.getContext('2d');
  
            
    function translation()
            {
                 
                ctx.clearRect(0,0,600,600);
                
                ctx.translate (10,10);
                ctx.beginPath();
               
            ctx.arc(10,10,100,2*Math.PI,false);
                ctx.fillStyle="red";
                ctx.fill();             
                
            }  
 
    var dby=setInterval(translation,300);                  
            
        </script>
    </body>
</html>

je ne comprends ou je me suis trompé

merci d'avance

jour

essai comme ceci

Code:

ctx.arc(100,100,100,2*Math.PI,false);

ou bien encore

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
dessin
</title>
 
</head>
<body>
<canvas id="dessin" width="600" height="600" style="border-style:solid;"></canvas>
 
 
<script>
 
 
var dessin=document.getElementById('dessin');
 
 
ctx=dessin.getContext('2d');
var x= -50
var y=-50
 
function translation()
{
 
ctx.clearRect(0,0,600,600);
 
ctx.beginPath();
 
ctx.arc(x,y,100,2*Math.PI,false);
ctx.fillStyle="red";
ctx.fill();
 
 
x+=10
y+=10
 
 
}
 
var dby=setInterval(translation,300);
 
</script>
</body>
</html>

23/11/2015, 03h11
schine

bonjour

la seconde methode marche

merci