Как нарисовать нижнюю половину круга на холсте - PullRequest
Новая
       38

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

4 голосов
/ 29 ноября 2011

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

enter image description here

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

    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();
            }
        }
    }

РЕДАКТИРОВАТЬ: я знаю о функции дуги.Мне нужно реализовать дугу таким образом, потому что это будет использоваться как часть более крупной задачи, где мне нужно вычислить каждую отдельную точку дуги.

Ответы [ 5 ]

8 голосов
/ 29 ноября 2011

Есть функция 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();
4 голосов
/ 29 ноября 2011

Просто поставьте - перед r 

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

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

4 голосов
/ 29 ноября 2011

Вам нужно изменить начало на 0, а конечную точку на Math.Pi

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

См. Здесь пример: http://jsfiddle.net/kvAzb/1/

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

РЕДАКТИРОВАТЬ

Ага, комментарий Роджера объясняет это.Координаты холста начинаются с 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); }

3 голосов
/ 29 ноября 2011

Существует функция, которая просто делает для вас, 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/

0 голосов
/ 29 ноября 2011

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

...