怎么能用 JavaScript 写出这个 BASIC Circle 语句？

Question

我正在用 JavaScript 重写一些旧的 QuickBasic 代码（是的，真的）。在 QuickBasic 中，圆的定义如下：

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

在 HTML5 画布上的 JavaScript 中，如下所示：

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

正如我们所看到的，这些语句非常相似 - 除了 QuickBasic 具有颜色和方面的参数。

我可以使用 context.strokeStyle 来处理颜色，但我不确定如何处理方面？我将使用什么 JavaScript 命令来完成与 QuickBasic 通过 aspect 参数描述的效果类似的效果？

在这种情况下方面可以定义为：

“0 到 1 的单个值会影响垂直高度，大于 1 的值会影响椭圆的水平宽度。纵横比 = 1 是一个普通圆。” - QB64 Wiki

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

Answer 1

这是一个使用 javascript 椭圆的 CIRCLE 函数，它影响纵横方向的垂直和水平。

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>