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

哪里有問題，顯示不出來？

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>彎月封裝</title>
?? ?</head>
?? ?<body>
?? ??? ?<canvas id="canvas" style="display: block;border: 1px solid #ddd; margin: 50px auto;"></canvas>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?window.onload = function(){
?? ??? ??? ??? ?var canvas = document.getElementById("canvas");
?? ??? ??? ??? ?canvas.width = 800;
?? ??? ??? ??? ?canvas.height = 800 ;
?? ??? ??? ??? ?
?? ??? ??? ??? ?var cxt = canvas.getContext("2d");
?? ??? ??? ??? ?
?? ??? ??? ??? ?fillMoon(cxt,2,400,400,300,0);
?? ??? ??? ?}
?? ??? ??? ?function fillMoon(cxt , d , x , y , R , rot , /*optional*/ fillColor ){
?? ??? ??? ??? ?cxt.save();
?? ??? ??? ??? ?cxt.translate(x , y);
?? ??? ??? ??? ?cxt.rotate(rot * Math.PI / 180);
?? ??? ??? ??? ?cxt.scale(R , R);
?? ??? ??? ??? ?pathMoon( cxt , d );
?? ??? ??? ??? ?cxt.fillStyle = fillColor || "#fb5";
?? ??? ??? ??? ?cxt.fill();
?? ??? ??? ??? ?cxt.restore();
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?function pathMoon(cxt,d){
?? ??? ??? ??? ?cxt.beginPath();
?? ??? ??? ??? ?cxt.arc(0,0,1,0.5*Math.PI, 1.5*Math.PI ,true);
?? ??? ??? ??? ?ct.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));
?? ??? ??? ?}
?? ??? ?</script>
?? ?</body>
</html>