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