                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

為什么我畫出來(lái)的不是彎月？仔細(xì)核對(duì)了代碼，沒找到問(wèn)題，求指點(diǎn)

var canvas =document.getElementById("canvas");
if (canvas.getContext("2d")) {
? ?var context = canvas.getContext("2d");
}
else {
? ?alert("當(dāng)前瀏覽器不支持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));
? ?}