Dessiner des arcs de cercles Canvas HTML avec JavaScript

La fonction Circle() permet de dessiner des arcs de cercle(s) dans une balise Canvas HTML, avec des longueurs exprimées en pourcentages.

Circle()

Retourne un object "cercle" dans lequel dessiner des arcs de cercle qui sera dessiné dans le canvas spécifié.

Syntaxe

new Circle(canvas, angle_depart);

Paramètres

canvas(Node)

Le paramètre canvas de la fonction Circle() définit l'élément canvas HTML dans lequel sera dessiné les arcs de cercle(s).

angle_depart(Number)

Le paramètre angle_depart de la fonction Circle() définit le point de départ des arcs de cercles qui seront dessinés.
Si ce paramètre est ommis, la valeur utilisée par défaut sera "4.7" pour un angle de départ en haut.

• 4.7 : départ en haut (0°)
• 0 : départ à droite (90°)
• -4.72 : départ en bas (180°)
• 9.4305 : départ à gauche (270°)

Méthode de l'instance

cercle.arc()

La méthode arc() de l'interface Circle() ajoute un arc de cercle dans un canvas HTML.
Pour chaque nouvel arc ajouté dans un même objet "cercle", le point de départ sera le point de terminaison de l'arc précédemment ajouté, de sorte que - par exemple - plusieurs arcs peuvent dessiner un cercle complet.

Syntaxe

cercle.arc(options);

Paramètre

options(Object)

Le paramètre options de la méthode arc() définit l'ensemble des propriétés de l'arc qui sera ajouté au cercle.

Propriétés

percent(Number)

La propriété percent du paramètre options définit la longueur de l'arc de cercle en pourcentage.
Si cette propriété est omise, l'arc de cercle aura une longueur par défaut de 100%.

radius(Number)

La propriété radius du paramètre options définit le rayon de l'arc de cercle, exprimé en décalage de pixels par rapport à l'extrémité du cercle.
Si cette propriété est omise, le rayon aura la valeur par défaut 0.

lineWidth(Number)

La propriété lineWidth du paramètre options définit l'épaisseur de trait de l'arc de cercle, en pixels.
Si cette propriété est omise, l'arc de cercle aura une épaisseur de 1 par défaut.

strokeStyle(String)

La propriété strokeStyle du paramètre options définit la couleur de l'arc de cercle en pourcentage.
Si cette propriété est omise, l'arc de cercle aura une couleur noire par défaut.

lineCap(String)

La propriété lineCap du paramètre options définit le style de terminaison de l'arc de cercle.
Si cette propriété est omise, l'arc de cercle aura une terminaison droite par défaut.

• butt : terminaison droite
• round : terminaison arrondie

globalAlpha(Number)

La propriété globalAlpha du paramètre options définit l'opacité de l'arc de cercle, comprise entre 0 (transparent) et 1 (opaque).
Si cette propriété est omise, l'arc de cercle sera opaque par défaut.

D'autres styles sont décrits dans le tutoriel sur les Canvas du MDN : "Ajout de styles et de couleurs".

var canvas = document.getElementById('canvas');

new Circle(canvas, 4.7)
  .arc({
    percent: 20,
    radius: 0,
    lineWidth: 20,
    strokeStyle: 'blue',
    lineCap: 'butt',
    globalAlpha: 1
  })
  .arc({
    percent: 80,
    lineWidth: 20,
    strokeStyle: 'blue',
    lineCap: 'butt',
    globalAlpha: .5
  });

function Circle(e,a){if(!(typeof e==='object'&&e!==null&&typeof e.nodeName==='string'&&e.nodeName==='CANVAS')){
throw new TypeError('invalid canvas')}if(typeof a==='undefined'){a=4.7}else if(typeof a!=='number'){
throw new TypeError('invalid angle')}var t=this,c=e.getContext("2d"),w=e.offsetWidth/2,
h=e.offsetHeight/2,m=(w<h)?w:h;t.arc=function(o){if(typeof o==='undefined'){o={}}else{if(!(typeof o==='object'&&
o&&!Array.isArray(o)&&!(Object.prototype.toString.call(o)==='[object Date]'))){throw new TypeError('invalid arc')}}
var O={lineWidth:1,globalAlpha:1,percent:100,radius:0,strokeStyle:'#000000'};for(var k in o){O[k]=o[k]}
O.percent=((O.percent===100)?99.999:O.percent);c.beginPath();for(var k in O){if(k!=='percent'&&k!=='radius'){
c[k]=O[k]}}c.arc(w,h,(m-O.lineWidth+O.radius),a,(a+2*Math.PI*O.percent/100-2*Math.PI));c.stroke();
a=a+2*Math.PI*O.percent/100-2*Math.PI;return t}}