绘制圆和圆环方法

arc(x, y, radius, startAngle, endAngle, anticlockwise)  
  // 画一个以（x,y）为圆心, 以radius为半径的圆, 从startAngle开始到endAngle结束，顺时针

arcTo(x1, y1, x2, y2, radius)  //根据给定的控制点和半径画一段圆弧，以直线连接两个控制点

完整的圆

window.onload = function(){
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");

    ctx.arc(400,400,20,0,Math.PI*2);  // Math.PI*2 => 整圆
    ctx.fill(); 
    ctx.stroke();   
};

1/4圆弧

window.onload = function(){
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");

    ctx.arc(400,400,20,0,Math.PI*2/4); // Math.PI*2/4 => 整圆/4
    ctx.fill(); 
    ctx.stroke();   
};

圆球动画

window.onload=function(){
        var cvs = document.getElementById("cvs");
        var ctx = cvs.getContext("2d");

        var r = 100;
        var state = false;

function draw(){
    ctx.clearRect(0, 0, cvs.width, cvs.height);

    ctx.beginPath();
    ctx.arc(200, 200, r, 0, Math.PI*2);
    ctx.fill();

    update();
    }

function update(){
    if(state){
    r++;
    if (r >= 150)
       state = !state;
    } else {
      r--;
    if(r <= 50)
        state = !state;
        }
   }
   setInterval(draw, 100);
    }