Arc canvas animation

**djmahdouch** · 12/04/2014, 18h48

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 Nom : Capture d’écran 2014-04-12 à 18.34.58.png
Affichages : 319
Taille : 168,1 Ko

Nom : Capture d’écran 2014-04-12 à 18.34.58.png
Affichages : 319
Taille : 168,1 Ko

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 :

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

**NoSmoking** · 13/04/2014, 10h41

Bonjour,
j'ai du mal à comprendre ce que tu ne comprends pas

Tout est dans la méthode

Code :

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

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

il te suffit de changer le radius, startAngle et endAngle pour chacun de tes cercles.

**djmahdouch** · 14/04/2014, 00h50

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

**NoSmoking** · 14/04/2014, 12h58

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

Code html :

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

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 :

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
  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();
     }
  }