Comment pourrait-on écrire cette déclaration de cercle de base en JavaScript?

Question

J'ai un ancien code QuickBasic (oui, vraiment) que je travaille sur la réécriture en JavaScript. Dans QuickBasic un cercle est défini comme ceci:

CIRCLE (column, row), radius, color, startRadian, stopRadian, aspect

en JavaScript sur la toile HTML5 comme ceci: Comme on peut le voir, les déclarations sont assez similaires

c.arc(column, row, radius, startAngle, endAngle, counterclockwise);

- sauf que QuickBasic a des paramètres pour la couleur et l'aspect.

Je peux utiliser context.strokeStyle pour gérer la couleur, mais je ne sais pas comment gérer l'aspect? Quelle commande JavaScript devrais-je utiliser pour accomplir un effet similaire à celui décrit par QuickBasic via le paramètre aspect?

Dans cet aspect de cas peut être défini comme:.

« valeurs uniques de 0 à 1 affectent la hauteur verticale et les valeurs sur une incidence sur la largeur horizontale d'une ellipse Aspect = 1 est un cercle normal. " - QB64 Wiki

1http://www.qb64.net/wiki/index.php?title=CIRCLE

Answer 1

Voici une fonction CIRCLE en utilisant javascript ellipse que les effets verticaux et horizontaux pour l'aspect.

var can = document.getElementById('can'); 
 
var ctx = can.getContext('2d'); 
 
var w = can.width; 
 
var h = can.height; 
 
var x = w/2; 
 
var y = h/2; 
 
var radius = 30; 
 
var startAngle = 0; 
 
var endAngle = Math.PI*2; 
 
var color = 'red'; 
 

 
CIRCLE(x, y, radius, color, startAngle, endAngle, .5); 
 
CIRCLE(x+10, y+10, radius, 'blue', startAngle, endAngle, 1.5); 
 

 
function CIRCLE (column, row, radius, color, startRadian, stopRadian, aspect) { 
 
    var rotation = 0; 
 
    var anticlockwise = 0; 
 
    
 
    if (aspect == 1) { 
 
    var rx = radius; 
 
    var ry = radius; 
 
    } else if(aspect < 1) { 
 
    var rx = radius * aspect; 
 
    var ry = radius; 
 
    } else if(aspect > 1) { 
 
    var rx = radius; 
 
    var ry = radius * (aspect-1); 
 
    } 
 
    
 
    ctx.fillStyle=color; 
 
    ctx.beginPath(); 
 
    ctx.ellipse(x, y, rx, ry, rotation, startAngle, endAngle, anticlockwise); 
 
    ctx.fill(); 
 
}

<canvas id='can' width='200' height='150'></canvas>