Javascriptista

Canvasで円が書く方法です

DEMO

円を線で描く

DEMO

var canvas;
var ctx;

onload = function(){
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  drawClear();
}

function drawClear(){
  //色を指定
   ctx.strokeStyle = 'rgb(255,0,0)';

  //0度から360度まで描くように指定
  ctx.arc(140,80,50,0/180*Math.PI,360/180*Math.PI,true);

  //円を線でひく
  ctx.stroke();
}

円を途中まで描く

DEMO

var canvas;
var ctx;

onload = function(){
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  drawClear();
}

function drawClear(){
  //色を指定
  ctx.strokeStyle = 'rgb(255,0,0)';

  //0度から180度の孤を指定
  ctx.arc(140,80,50,0/180*Math.PI,180/180*Math.PI,true);

  //円を線でひく
  ctx.stroke();
}

下に書くときは、第2、3引数を逆にするのもいいですが、第4引数をfalseにすることで、逆方向に線を引きます。

DEMO

var canvas;
var ctx;

onload = function(){
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  drawClear();
}

function drawClear(){
  //色を指定
  ctx.strokeStyle = 'rgb(255,0,0)';

  //0度から180度の孤を指定
  ctx.arc(140,80,50,0/180*Math.PI,180/180*Math.PI,false);

  //円を線でひく
  ctx.stroke();
}

途中までの円を直線で閉じる

円を閉じたいときはbeginPath,closePathを使います

  DEMO
 

var canvas;
var ctx;

onload = function(){
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  drawClear();
}

function drawClear(){
  //色を指定
  ctx.strokeStyle = 'rgb(255,0,0)';

  //線開始を指定
  ctx.beginPath();

  //0度から180度の孤を指定
  ctx.arc(140,80,50,0/180*Math.PI,270/180*Math.PI,false);

  //閉じる
  ctx.closePath();

  //円を線でひく
  ctx.stroke();

}

円を塗る

DEMO

var canvas;
var ctx;

onload = function(){
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  drawClear();
}

function drawClear(){
  //色を指定
  ctx.fillStyle = 'rgb(255,0,0)';

  //円を指定。
  ctx.arc(140,80,50,0/180*Math.PI,360/180*Math.PI,true);

  //円を線でひく
  ctx.fill();
}