Canevas html: Lignes courbées: arc()

précédent suivant

Parfois, on veut seulement dessiner des cercles, soit en totalité ou en partie; pour cela, on a besoin de la méthode arc()

var pi = Math.PI;
ctx.lineWidth = 3;

ctx.beginPath();
ctx.strokeStyle = "cyan";
ctx.arc(30, 30, 20, 0, pi/4, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "orange";
ctx.arc(90, 30, 20, 0, pi/2, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "lime";
ctx.arc(150, 30, 20, 0, 3*pi/4, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.arc(210, 30, 20, 0, pi, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "violet";
ctx.arc(270, 30, 20, 0, 5*pi/4, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "brown";
ctx.arc(30, 90, 20, 0, 3*pi/2, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "olive";
ctx.arc(270, 90, 20, 0, 7*pi/4, false);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.arc(150, 150, 50, 0, 2*pi, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "cyan";
ctx.arc(30, 270, 20, 0, pi/4, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "orange";
ctx.arc(90, 270, 20, 0, pi/2, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "lime";
ctx.arc(150, 270, 20, 0, 3*pi/4, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "red";
ctx.arc(210, 270, 20, 0, pi, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "violet";
ctx.arc(270, 270, 20, 0, 5*pi/4, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "brown";
ctx.arc(30, 210, 20, 0, 3*pi/2, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "olive";
ctx.arc(270, 210, 20, 0, 7*pi/4, true);
ctx.stroke();

Explication

En jouant avec le code ci-dessus, vous avez peut-être trouvé par vous-même que les arguments de la méthode arc étaient les suivants:

Cette méthode requiert cinq paramètres: x et y sont les coordonnées du centre du cercle. rayon est le rayon du cercle. Les paramètres angle_initial et angle_final, spécifiés en radians, définissent le début et la fin de l'arc de cercle. Les valeurs d'angles dont mesurées par rapport à l'axe des x. Le paramètre sens_rotation est une variable booléenne qui détermine si l'arc de cercle sera dans le sens inverse des aiguilles d'une montre ("true") ou dans le sens des aiguilles d'une montre ("false").

précédent suivant

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      canvas {border: 2px solid green;}
    </style>
  </head>
  <body>
<p>Vous voudrez peut-être cliquer sur l'image
<img class="small_img" src="../../images/icons/html.png" /> dans
la fenêtre principale, et changer la valeur de la variable <b>explain</b>
("explique") à <b>true</b>.</p>
    <canvas height="300" id="canvas" width="400" />
  </body>
<script>
// raccourci jQuery servant à identifier le iframe
// servant à montrer le résultat.
var $ = parent.$;
var ctx = $('#canvas', document)[0].getContext("2d");

// On efface tout ce qui avait été dessiné plus tôt pour
// bien voir les changements.
ctx.clearRect(0, 0, 300, 400);

var explain = false;

function circ(x, y, r) {
  ctx.beginPath();
  ctx.fillStyle = "LightGray";
  ctx.arc(x, y, r, 0, 2*Math.PI, true);
  ctx.fill();
}
if (explain) {
    circ(30, 30, 20);
    circ(90, 30, 20);
    circ(150, 30, 20);
    circ(210, 30, 20);
    circ(270, 30, 20);

circ(30, 90, 20);
    circ(270, 90, 20);

circ(150, 150, 50);
    ctx.fillStyle = "black";
    ctx.fillText("0 = 2*π", 210, 155);
    ctx.fillText("π", 80, 155);
    ctx.fillText("π/2", 145, 215);
    ctx.fillText("3π/2", 150, 90);

circ(30, 210, 20);
    circ(270, 210, 20);

circ(30, 270, 20);
    circ(90, 270, 20);
    circ(150, 270, 20);
    circ(210, 270, 20);
    circ(270, 270, 20);
}

JS_CODE /* replacé par le code
          dans l'autre éditeur */
</script>
</html>

[Le tableau qui suit a été adapté de Wikipedia.]

nom HTML	code hex. R V B
Couleurs rouges
IndianRed	CD 5C 5C
LightCoral	F0 80 80
Salmon	FA 80 72
DarkSalmon	E9 96 7A
LightSalmon	FF A0 7A
Crimson	DC 14 3C
Red	FF 00 00
FireBrick	B2 22 22
DarkRed	8B 00 00
Couleurs roses
Pink	FF C0 CB
LightPink	FF B6 C1
HotPink	FF 69 B4
DeepPink	FF 14 93
MediumVioletRed	C7 15 85
PaleVioletRed	DB 70 93
Couleurs oranges
LightSalmon	FF A0 7A
Coral	FF 7F 50
Tomato	FF 63 47
OrangeRed	FF 45 00
DarkOrange	FF 8C 00
Orange	FF A5 00
Couleurs jaunes
Gold	FF D7 00
Yellow	FF FF 00
LightYellow	FF FF E0
LemonChiffon	FF FA CD
LightGoldenrodYellow	FA FA D2
PapayaWhip	FF EF D5
Moccasin	FF E4 B5
PeachPuff	FF DA B9
PaleGoldenrod	EE E8 AA
Khaki	F0 E6 8C
DarkKhaki	BD B7 6B
Couleurs violettes
Lavender	E6 E6 FA
Thistle	D8 BF D8
Plum	DD A0 DD
Violet	EE 82 EE
Orchid	DA 70 D6
Fuchsia	FF 00 FF
Magenta	FF 00 FF
MediumOrchid	BA 55 D3
MediumPurple	93 70 DB
BlueViolet	8A 2B E2
DarkViolet	94 00 D3
DarkOrchid	99 32 CC
DarkMagenta	8B 00 8B
Purple	80 00 80
Indigo	4B 00 82
SlateBlue	6A 5A CD
DarkSlateBlue	48 3D 8B

nom HTML	code hex. R V B
Couleurs vertes
GreenYellow	AD FF 2F
Chartreuse	7F FF 00
LawnGreen	7C FC 00
Lime	00 FF 00
LimeGreen	32 CD 32
PaleGreen	98 FB 98
LightGreen	90 EE 90
MediumSpringGreen	00 FA 9A
SpringGreen	00 FF 7F
MediumSeaGreen	3C B3 71
SeaGreen	2E 8B 57
ForestGreen	22 8B 22
Green	00 80 00
DarkGreen	00 64 00
YellowGreen	9A CD 32
OliveDrab	6B 8E 23
Olive	80 80 00
DarkOliveGreen	55 6B 2F
MediumAquamarine	66 CD AA
DarkSeaGreen	8F BC 8F
LightSeaGreen	20 B2 AA
DarkCyan	00 8B 8B
Teal	00 80 80
Couleurs bleues
Aqua	00 FF FF
Cyan	00 FF FF
LightCyan	E0 FF FF
PaleTurquoise	AF EE EE
Aquamarine	7F FF D4
Turquoise	40 E0 D0
MediumTurquoise	48 D1 CC
DarkTurquoise	00 CE D1
CadetBlue	5F 9E A0
SteelBlue	46 82 B4
LightSteelBlue	B0 C4 DE
PowderBlue	B0 E0 E6
LightBlue	AD D8 E6
SkyBlue	87 CE EB
LightSkyBlue	87 CE FA
DeepSkyBlue	00 BF FF
DodgerBlue	1E 90 FF
CornflowerBlue	64 95 ED
MediumSlateBlue	7B 68 EE
RoyalBlue	41 69 E1
Blue	00 00 FF
MediumBlue	00 00 CD
DarkBlue	00 00 8B
Navy	00 00 80
MidnightBlue	19 19 70

nom HTML	code hex. R V B
Couleurs brunes
Cornsilk	FF F8 DC
BlanchedAlmond	FF EB CD
Bisque	FF E4 C4
NavajoWhite	FF DE AD
Wheat	F5 DE B3
BurlyWood	DE B8 87
Tan	D2 B4 8C
RosyBrown	BC 8F 8F
SandyBrown	F4 A4 60
Goldenrod	DA A5 20
DarkGoldenrod	B8 86 0B
Peru	CD 85 3F
Chocolate	D2 69 1E
SaddleBrown	8B 45 13
Sienna	A0 52 2D
Brown	A5 2A 2A
Maroon	80 00 00
Couleurs blanches
White	FF FF FF
Snow	FF FA FA
Honeydew	F0 FF F0
MintCream	F5 FF FA
Azure	F0 FF FF
AliceBlue	F0 F8 FF
GhostWhite	F8 F8 FF
WhiteSmoke	F5 F5 F5
Seashell	FF F5 EE
Beige	F5 F5 DC
OldLace	FD F5 E6
FloralWhite	FF FA F0
Ivory	FF FF F0
AntiqueWhite	FA EB D7
Linen	FA F0 E6
LavenderBlush	FF F0 F5
MistyRose	FF E4 E1
Couleurs grises
Gainsboro	DC DC DC
LightGrey	D3 D3 D3
Silver	C0 C0 C0
DarkGray	A9 A9 A9
Gray	80 80 80
DimGray	69 69 69
LightSlateGray	77 88 99
SlateGray	70 80 90
DarkSlateGray	2F 4F 4F
Black	00 00 00

Votre cahier de notes

Garder vos notes personnelles ici. Ces notes sont entreposées par votre navigateur sur votre propre ordinateur, et seront disponible à partir de n'importe quelle page de ce site. Vous pouvez choisir d'utiliser la syntaxe html pour les formatter.