我有一些旧的 QuickBasic 代码(是的,确实如此),我正在用 JavaScript 重写它们。在 QuickBasic 中,圆的定义如下:
CIRCLE(列、行)、半径、颜色、startRadian、stopRadian、方面
在 HTML5 Canvas 上的 JavaScript 中,如下所示:
c.arc(列、行、半径、起始 Angular 、结束 Angular 、逆时针);
正如人们所看到的,这些语句非常相似 - 除了 QuickBasic 具有颜色和外观参数之外。
我可以使用 context.tripStyle 来处理颜色,但我不确定如何处理方面?我将使用什么 JavaScript 命令来实现与 QuickBasic 通过方面参数描述的类似效果?
在这种情况下,方面可以定义为:
"SINGLE values of 0 to 1 affect the vertical height and values over 1 affect the horizontal width of an ellipse. Aspect = 1 is a normal circle." - QB64 Wiki
最佳答案
这是一个使用 javascript ellipse 的 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>
关于javascript - 如何用 JavaScript 编写这个基本的 Circle 语句?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40145263/