Animation d'une balle

**schine** · 22/11/2015, 19h37

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**melka one** · 22/11/2015, 21h06

jour

essai comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou bien encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**schine** · 23/11/2015, 03h11

bonjour

la seconde methode marche

merci

Animation d'une balle

JavaScript

Vue hybride

Discussions similaires

Partager

Partager