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));
? ?}