Wie könnte man diese BASIC Circle-Anweisung in JavaScript schreiben?

Question

Ich habe einige alte QuickBasic-Code (ja, wirklich), dass ich arbeite in JavaScript umschreiben. In Quickbasic ist ein Kreis wie so definiert:

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

in JavaScript auf den HTML5-Canvas wie so:

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

Wie man sehen kann, sind die Aussagen ziemlich ähnlich sind - außer, dass Quickbasic hat Parameter für Farbe und Aspekt.

Ich kann context.strokeStyle verwenden, um die Farbe zu behandeln, aber ich bin unsicher, wie man mit dem Aspekt umgehen soll? Mit welchem ​​JavaScript-Befehl würde ich einen ähnlichen Effekt erzielen, wie er von QuickBasic über den aspect-Parameter beschrieben wird?

In diesem Fall Aspekte wie folgt definiert werden kann:.

„SINGLE-Werte von 0 bis 1, um die vertikale Höhe und Wert über 1 beeinflussen die horizontale Breite einer Ellipse beeinflussen Aspect = 1 ist ein normaler Kreis. " - QB64 Wiki

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

Answer 1

Hier ist eine CIRCLE JavaScript-Funktion Ellipse, dass die Auswirkungen vertikale und horizontale für Aspekt verwendet wird.

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>