어떻게이 기본 서클 문을 JavaScript로 작성할 수 있습니까?

Question

JavaScript에서 다시 작성하는 중 일부 오래된 QuickBasic 코드 (예, 정말) 있습니다. 의 QuickBasic에서 원과 같이 정의된다 :

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

그래서 같은 HTML5 캔버스에 자바 스크립트에서

이 하나는 볼 수 있듯이

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

, 문이 상당히 유사하다 - 것을 제외하고 QuickBasic에 색상 및 애스펙트에 대한 매개 변수가 있습니다.

context.strokeStyle을 사용하여 색상을 처리 할 수는 있지만 aspect를 처리하는 방법은 확실하지 않습니까? 애스펙트 매개 변수를 통해 QuickBasic에서 설명한 것과 비슷한 효과를 내기 위해 사용하는 JavaScript 명령은 무엇입니까? 이 경우 양태에서

같이 정의 할 수있다. 0 ~ 1의

"SINGLE 값 타원의 가로 폭에 영향을 미치는 하나 이상의 수직 높이 값에 영향을 가로 = 1 정상 원이다. " - QB64 Wiki

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

Answer 1

여기 타원 자바 스크립트를 사용하여 원 기능하다는 수직 및 수평 양태 효과.

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>

의