注意：
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>
时间： 2024-08-11 23:52:21