在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通過aspect參數所描述的類似效果？

在這種情況下方面可以被定義爲：

「的0至1 SINGLE值影響的垂直高度和值超過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>