<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>arc</title>
</head>
<body>
<canvas id="canvas">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext('2d');
drawMoon(context,2,400,400,300,0);
}
function drawMoon(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);
cxt.fillStyle="#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);
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));
}
</script>
</body>
</html>