Arc canvas animation

Version imprimable

1 pièce(s) jointe(s)

Bonjour,
j'aimerai savoir comment je peux dessiner un cercle d'arcs comme dans l'image ci-joint en utilisant canvas j'ai utilisé quelque solution mais ça fonctionne pas comme je voulais Pièce jointe 142793
voilà le code que j'ai utilisé et je demande si il y'a une possibilité d'utilisé la librairie paper.js et merci d'avance

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
	  #circle{
	position:absolute;
	top:30%;
	left:35%;
	}
	 #myCanvas{
		 position:absolute;
		 top:0;
		 left:0;
		 }
		 #myCanvas1{
		 position:absolute;
		 top:0;
		 left:8px;
		 -webkit-transform:rotate(2deg);
		 -o-transform:rotate(2deg);
		 -ms-transform:rotate(2deg);
		 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
		 }
		 #myCanvas2{
		 position:absolute;
		 top:0;
		 left:25px;
		 -webkit-transform:rotate(20deg);
		 -o-transform:rotate(20deg);
		 -ms-transform:rotate(20deg);
		 filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
		 }
	body{
    background:orange;    
}
 
 
    </style>
  </head>
  <body>
 <div id="cercle">
    <canvas id="myCanvas"  width="330" height="330"></canvas>
    <canvas id="myCanvas1"  width="330" height="330"></canvas>
    <canvas id="myCanvas2"  width="330" height="330"></canvas>
     </div>
   <!--  <div class='hider'>
    <div class="arc"></div>
</div>
   -->
 
	 <script>
var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 133;
      var startAngle = 0.5 * Math.PI;
      var endAngle = 1.5 * Math.PI;
      var counterClockwise = false;
 
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 1;
context.strokeStyle = '#000';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = '#656565';
context.stroke();
 
 
/* -----------------*/	
var canvas1 = document.getElementById('myCanvas1');
      var context1 = canvas1.getContext('2d');
      var x1 = canvas1.width / 2;
      var y1 = canvas1.height / 2;
      var radius1 = 130;
      var startAngle1 = 0.7 * Math.PI;
      var endAngle1 = 1 * Math.PI;
      var counterClockwise1 = false;
 
context1.beginPath();
context1.arc(x1, y1, radius1, startAngle1, endAngle1, counterClockwise1);
context1.lineWidth = 20;
context1.strokeStyle = '#FFF';
context1.shadowOffsetX = 0;
context1.shadowOffsetY = 0;
context1.shadowBlur = 10;
context1.shadowColor = '#656565';
context1.stroke();
 
 
 
/* -----------------*/
 var canvas2 = document.getElementById('myCanvas2');
      var context2 = canvas2.getContext('2d');
      var x2 = canvas2.width / 2;
      var y2 = canvas2.height / 2;
      var radius2 = 133;
      var startAngle2 = 0.5 * Math.PI;
      var endAngle2 = 2 * Math.PI;
      var counterClockwise2 = false;
 
context2.beginPath();
context2.arc(x2, y2, radius2, startAngle2, endAngle2, counterClockwise2);
context2.lineWidth = 1;
context2.strokeStyle = '#000';
context2.shadowOffsetX = 0;
context2.shadowOffsetY = 0;
context2.shadowBlur = 10;
context2.shadowColor = '#656565';
context2.stroke();
/* -----------------*/
    </script>
  </body>
</html>

13/04/2014, 10h41
NoSmoking

Bonjour,
j'ai du mal à comprendre ce que tu ne comprends pas :oops:
Tout est dans la méthode

Code:

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

il te suffit de changer le radius, startAngle et endAngle pour chacun de tes cercles.
14/04/2014, 00h50
djmahdouch

ça n'a pas fonctionner toujours un petit décalage entre les arcs

Voici ce que l'on peut obtenir en utilisant le même context/canvas

Code:

1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[Canvas]</title>
</head>
<body>
  <canvas id="le_canvas" width="600" height="600">Balise &lt;canvas&gt; non prise en compte</canvas>
<script>

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
  var oCanvas = document.getElementById('le_canvas');
  if( oCanvas && oCanvas.getContext){
    var colorStyle = ['#89A','#9AB','#ABC','#BCD','#CDE', '#DEF'],
        i, larg = 30,
        nbrInc = colorStyle.length,
        rayon = 100,
        angleFin = 1.5 * Math.PI,
        angleDeb = 1.0 * Math.PI,
        incAngle = Math.PI /nbrInc,
        // get context
        context = oCanvas.getContext('2d'),
        // position centre
        posX = oCanvas.width / 2,
        posY = oCanvas.height / 2;
 
    for( i=0; i < nbrInc; i++){
      context.beginPath();
        // definition style trace
        context.lineWidth = larg;
        context.strokeStyle = colorStyle[i];
        // trace de l'arc
        context.arc( posX, posY, rayon, angleFin, angleDeb, true);
        context.stroke();
        // incrémentation pour prochain
        angleFin += incAngle;
        angleDeb += incAngle;
        rayon += context.lineWidth;
 
      context.beginPath();
        // definition style trace
        context.lineWidth = 1;
        context.strokeStyle = '#000';
        // trace de l'arc
        context.arc( posX, posY, rayon -(larg/2), 0, 2*Math.PI, true);
        context.stroke();
     }
  }

Code:

1
2
3
</script>
</body>
</html>

14/04/2014, 14h37
djmahdouch

Merci beaucoup je crois que ça répond à ma question pour le moment parce que après je vais faire une animation au clic