Как нарисовать нижнюю половину круга в холсте

Question

Я пытаюсь нарисовать нижнюю половину круга с помощью соответствующих функций x = cos (theta), y = sin (theta). Если я итерацию тета от Math.PI до 2 * Math.PI я, кажется, получают верхнюю половину круга вместо:

Что я делаю неправильно в этом фрагменте кода:

window.onload = function() 
    { 
     var canvas = document.getElementById('circle-canvas'); 

     if (canvas && canvas.getContext) { 
      var context = canvas.getContext('2d'); 
      if (context) { 
       context.strokeStyle = "#369"; 
       context.lineWidth = 4; 


       j = canvas.width/2; 
       k = canvas.height/2; 
       r = canvas.width/4; 

       function computeX(theta, r, j, k){ return r * Math.cos(theta) + j; } 
       function computeY(theta, r, j, k){ return r * Math.sin(theta) + k; } 

       start = Math.PI; 
       context.lineTo(computeX(start, r, j, k), computeY(start, r, j, k)); 
       for(var theta = start; theta <= (2*Math.PI); theta += .1) 
       { 
        x = computeX(theta, r, j, k); 
        y = computeY(theta, r, j, k), 

        context.lineTo(x, y); 
       } 
       context.stroke(); 
       context.closePath(); 
      } 
     } 
    } 

EDIT: Я знаю о функции дуги. Мне нужно реализовать дугу таким образом, потому что это будет использоваться как часть более серьезной проблемы, когда мне нужно вычислить каждую отдельную точку дуги.

Answer 1

Просто положить - прежде, чем г

y = computeY(theta, -r, j, k), 

Протестировано и работает

Answer 2

Функция arc.

var canvas = document.getElementById("circle-canvas"); 
var context = canvas.getContext("2d"); 

var centerX = canvas.width/2; 
var centerY = canvas.height/4; 

var radius = canvas.width/4; 

// I think these values are the angles for the bottom half - otherwise use other values 
var startingAngle = Math.PI; 
var endingAngle = 0; 
var counterclockwise = true; 

context.arc(centerX, centerY, radius, startingAngle, 
    endingAngle, counterclockwise); 

context.lineWidth = 4; 
context.strokeStyle = "#369"; 
context.stroke(); 

Answer 3

Существует функция, чтобы сделать только для вас сделать, arc.

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 
context.arc(256, 128, 128, Math.PI, 0, true); 
context.stroke(); 

http://jsfiddle.net/9mAq5/

Answer 4

быстро догадка, попробуйте изменить знак (если вы используете положительные относительные COORDS, попробуйте использовать негативы)

Answer 5

Вы должны изменить начало 0, а конец point to Math.Pi

Не совсем уверен, почему, но кажется, что холст идет по часовой стрелке, а не против часовой стрелки.

Смотрите здесь для примера: http://jsfiddle.net/kvAzb/1/

Выше решение работает, но это не правильное решение. Новое решение ниже:

EDIT

Aha, комментарий Роджера объясняет. Координаты холста начинаются с 0,0 в верхнем левом углу, а не в нижнем левом углу. Поэтому вам нужно перевернуть функцию computeY.

function computeY(theta, r, j, k){ return r * Math.sin(theta) + k; }

изменения

function computeY(theta, r, j, k){ return canvas.height - (r * Math.sin(theta) + k); }