<!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>
找到了，还是输入手误啊！因为不熟悉，工具自动提示自己没看清就选择了。cxt.moveTo(0,-1);
cxt.MoveTo(0,-1);