注意：
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>HTML5 Canvas 描画六叶草
原文地址：http://www.cnblogs.com/xiandedanteng/p/7469783.html