<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid;"> The current browser does not support Canvas, can replace the browser a try! </canvas> <script> window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 800; canvas.height = 800; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); // context.arc(400,400,300,0.5*Math.PI,1.5*Math.PI,true); // context.moveTo(400,100); // context.arcTo(1200,400,400,700,(400-100)*dis(400,100,1200,400)/(1200-400)) // context.stroke(); fillMoon(context,2,400,400,300,0) }else{ alert('当前游览器不支持Canvas，请更换游览器后再试！'); } } function dis(x1,y1,x2,y2){ return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) } // 优化 // x,y位置 r半径 function fillMoon(cxt,d,x,y,R,rot,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); moveTo(0,-1); cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d); // 或者使用贝塞尔二次曲线 // cxt.quadraticCurveTo(1.2,0,0,1) cxt.closePath(); } function dis(x1,y1,x2,y2){ return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)) } </script> </body> </html>