如何在画布中绘制圆的下半部分 [英] How to draw bottom half of a circle in canvas

问题描述

我试图用适当的x = cos（theta），y = sin（theta）函数绘制圆的下半部分。如果我从Math.PI迭代theta到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（）; 
} 
} 
} 
  

编辑：
我知道弧函数。我需要这样实现弧，因为这将被用作更大的问题的一部分，我需要计算弧的每个点。

解决方案

在$ r
$ b

  y = computeY（theta，-r，j，k）之前放一个 - 
  

经过测试并且可行

I am trying to draw the the bottom half of the circle using the appropriate x=cos(theta), y=sin(theta) functions. If I iterate theta from Math.PI to 2*Math.PI I seem to be getting the upper half of the circle instead:

What am I doing wrong in this code snippet:

    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: I am aware of the arc function. I need to implement the arc this way because this will be used as part of a bigger problem where I need to compute each individual point of the arc.

解决方案

Just put a - before r

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

Tested and it works

这篇关于如何在画布中绘制圆的下半部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！