var canvas =document.getElementById("canvas");
if (canvas.getContext("2d")) {
   var context = canvas.getContext("2d");
}
else {
   alert("当前浏览器不支持Canvas,推荐使用Chrome浏览器")
}

 $("#moon").bind("click",function () {
       var cxt = canvas.getContext("2d");
       fillMoon(cxt,2,200,200,100,30);
   });

   function fillMoon(cxt,d,x,y,R,rot){

       cxt.save();
       cxt.translate(x,y);
       cxt.rotate( rot * Math.PI / 180);
       cxt.scale(R,R);
       pathMoon(cxt,d);
/*
       var linearGrad = cxt.createLinearGradient(0,0,800,800);
       linearGrad.addColorStop(0.0,'white')
       linearGrad.addColorStop(0.5,'yellow')
       linearGrad.addColorStop(1.0,'white')
       cxt.fillStyle=linearGrad;

       var radialGrad = cxt.createRadialGradient(400,400,0,400,400,500);
       radialGrad.addColorStop(0.0,'white')
       radialGrad.addColorStop(0.5,'yellow')
       radialGrad.addColorStop(1.0,'white')

       cxt.fillStyle=radialGrad;
       cxt.fill();
*/
       cxt.strokeStyle="#caff67"
       cxt.stroke();
       cxt.restore();
   }

   function pathMoon(cxt,d){
       cxt.beginPath();
       cxt.arc(0, 0, 1, 0.5*Math.PI , 1.5*Math.PI , true);
       cxt.moveTo(0 , -1);
       cxt.arcTo(d, 0, 0, 1, dis( 0, -1, d, 0) / d );
       cxt.closePath();
   }

   function dis(x1,y1,x2,y2){
       return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
   }