注意：
context.arc(横坐标,纵坐标,弧半径,起始角度,终止角度,逆顺时针);
这个函数挺难用，主要原因是最后参数和角度的关系。
不管文档怎么说，按我的实际经验，逆顺时针=false时，是逆时针旋转；逆顺时针=true时，是顺时针旋转。
搞清楚这个，再来看角度。看下面语句：
context.arc(x,y,r,getRad(60),getRad(120),false);
这句话意思是以x,y为圆心，半径r画弧，逆时针转60度为起始点，逆时针转120度为终止点。
另外逆顺时针不要换来换去，坚持习惯的方式画到底最好。
代码：
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>六叶草</title> </head> <body onload="draw()"> <canvas id="myCanvus" width="204px" height="204px" style="border:1px dashed black;"> 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- function draw(){ var canvas=document.getElementById("myCanvus"); var context=canvas.getContext("2d"); context.fillStyle = "#336699"; context.fillRect(0, 0, 204, 204); context.translate(102,102); //context.rotate(Math.PI/6); var r=100;// 半径 context.beginPath(); context.arc(0,0,r,0,getRad(360),false); context.fillStyle="white"; context.closePath(); context.fill(); context.beginPath(); context.arc(r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(240),getRad(300),false);// 顺时针，转240度为起点，到300度为终点 context.arc(r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(60),getRad(120),false); // 顺时针，转60度为起点，到120度为终点 context.fillStyle="#336699"; context.closePath(); context.fill(); context.beginPath(); context.arc(r,0,r,getRad(180),getRad(240),false); context.arc(-r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(0),getRad(60),false); context.fillStyle="#336699"; context.closePath(); context.fill(); context.beginPath(); context.arc(r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(120),getRad(180),false); context.arc(-r,0,r,getRad(300),getRad(360),false); context.fillStyle="#336699"; context.closePath(); context.fill(); context.beginPath(); context.arc(-r*Math.cos(getRad(60)),-r*Math.sin(getRad(60)),r,getRad(60),getRad(120),false); context.arc(-r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(240),getRad(300),false); context.fillStyle="#336699"; context.closePath(); context.fill(); context.beginPath(); context.arc(r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(180),getRad(240),false); context.arc(-r,0,r,getRad(0),getRad(60),false); context.fillStyle="#336699"; context.closePath(); context.fill(); context.beginPath(); context.arc(-r*Math.cos(getRad(60)),r*Math.sin(getRad(60)),r,getRad(300),getRad(360),false); context.arc(r,0,r,getRad(120),getRad(180),false); context.fillStyle="#336699"; context.closePath(); context.fill(); } function getRad(degree){ return degree/180*Math.PI; } //--> </script>