キャンバスに円の下半分を描く方法

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

への変更はすぐに置く - R

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

迅速な推測では、あなたが0にスタートを変更する必要が

Answer 5

を（ネガを使用してみてください、あなたは正の相対COORDSを使用している場合）記号を変更してみてください、と終了 Math.Pi

なぜそうは思うのですか。しかし、キャンバスは時計回りに、反時計回りには表示されません。 http://jsfiddle.net/kvAzb/1/

ソリューションの作品の上に、それはない正解：

は、例えば、ここを参照してください。下記の新ソリューション：

EDIT

アハは、ロジャーのコメントは、それを説明しています。キャンバスの座標は、左下隅ではなく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); }