Как можно написать это заявление BASIC Circle в JavaScript?

Question

У меня есть старый код QuickBasic (да, действительно), над которым я работаю над переписыванием в JavaScript. В QuickBasic круг определяется следующим образом:

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

В JavaScript на холсте HTML5, как так:

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

Как видно, высказывания довольно похожи - за исключением того, что QuickBasic имеет параметры для цвета и аспект.

Я могу использовать context.strokeStyle для обработки цвета, но я не уверен, как обращаться с этим аспектом? Какую команду JavaScript я использовал бы для достижения аналогичного эффекта, как описано в QuickBasic через параметр аспекта?

В этом случае аспекте может быть определен как:.

«SINGLE значение от 0 до 1 влияет на вертикальную высоту и значение более 1 влияют на горизонтальную ширину эллипса Аспект = 1 является нормальным кругом. " - QB64 Wiki

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

Answer 1

Вот функция КРУГ Использование JavaScript эллипс, что эффекты, вертикальные и горизонтальные для аспекта.

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>