JavaScript图形实例：圆形图案
在HTML5的Canvas 2D API中，可以调用arc方法绘制圆或圆弧。该方法调用格式为：
context . arc(x, y, radius, startAngle, endAngle, anticlockwise)
其中：（x,y）为圆心坐标，radius为半径，startAngle和endAngle给定圆弧的开始角度和结束角度，anticlockwise给定方向，为布尔类型，规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
例如，编写如下的HTML文件。
<!DOCTYPE html>
<html>
<head>
<title>笑脸</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.beginPath();
context.arc(75,75,50,0,Math.PI*2,true); // 圆脸
context.moveTo(110,75);
context.arc(75,75,35,0,Math.PI,false); // 口(顺时针)
context.moveTo(65,65);
context.arc(60,65,5,0,Math.PI*2,true); // 左眼
context.moveTo(95,65);
context.arc(90,65,5,0,Math.PI*2,true); // 右眼
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="200" style="border:3px double #996633;"></canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出笑脸图案，如图1所示。
图1 笑脸图案
再例如，编写如下的HTML文件。
<!DOCTYPE html>
<head>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.lineWidth=2;
for (var i=1;i<10;i++)
{
context.beginPath();
context.arc(i*20,i*20,i*10,0,Math.PI*2,true);
context.strokeStyle = 'rgb('+(25*i)+','+(255-25*i)+',255)';
context.closePath();
context.stroke();
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出9个圆形沿直线从小到大抛出的图案，如图2所示。
图2 沿直线从小到大抛出的9个圆
1．圆周上的圆图案
在半径为60的圆周上取36个点作为圆心，绘制36个半径为60的圆。
可编写如下的HTML代码。
<!DOCTYPE html>
<head>
<title>圆周上的圆</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEDD";
context.fillRect(0,0,300,300);
context.strokeStyle="blue";
context.lineWidth=1;
var dig=Math.PI/18;
var radius=60;
context.beginPath();
for (var i=0;i<36;i++)
{
var x=radius*Math.cos(i*dig)+150;
var y=radius*Math.sin(i*dig)+150;
context.arc(x,y,radius,0,Math.PI*2,true);
}
context.closePath();
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出圆周上的圆图案，如图3所示。
图3 圆周上的圆图案
上面绘制的圆的颜色全部采用蓝色，若颜色采用rgb函数计算，可以修改上述HTML文件如下：
<!DOCTYPE html>
<head>
<title>圆周上的圆（二）</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEDD";
context.fillRect(0,0,300,300);
context.strokeStyle="blue";
context.lineWidth=1;
var dig=Math.PI/20;
var radius=70;
for (var i=0;i<40;i++)
{
context.beginPath();
var x=radius*Math.cos(i*dig)+150;
var y=radius*Math.sin(i*dig)+150;
context.arc(x,y,radius,0,Math.PI*2,true);
context.strokeStyle = 'rgb('+(6.25*i)+','+(255-6.25*i)+',255)';
context.closePath();
context.stroke();
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出圆周上的圆图案，如图4所示。
图4 圆周上的圆
2．圆的叠加
随机选定40个圆心坐标，绘制50个半径为40的圆，并用给定颜色进行填充。可编写的HTML代码如下。
<html>
<head>
<title>圆的叠加</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
var context=canvas.getContext('2d');
context.globalCompositeOperation = "lighter";
context.fillStyle = "#ff6699";
for(var i=0; i<50; i++)
{
context.beginPath();
context.arc(Math.random()*400,Math.random()*400, 40, 0,Math.PI*2);
context.closePath();
context.fill();
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;">
</canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出圆的叠加图案，如图5所示。
图5 圆的叠加图案
3．心脏形图案
在半径为60的圆周上选取28个圆心坐标，根据当前圆心坐标的椭圆公式计算出半径，按计算的半径分别绘制28个圆。可编写的HTML代码如下。
<!DOCTYPE html>
<head>
<title>心脏形图案</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,400);
context.strokeStyle="red";
context.lineWidth=2;
var r1=60;
var y1=150-r1;
var PI=3.1415926;
context.beginPath();
for(a=0;a<2*PI;a+=PI/27)
{
x=200+r1*Math.cos(a);
y=150+r1*Math.sin(a);
rs=Math.sqrt((x-200)*(x-200)+(y-y1)*(y-y1));
context.beginPath();
context.arc(x,y,rs,0,Math.PI*2,true);
context.closePath();
context.stroke();
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas！
</canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出心脏形图案，如图6所示。
图6 心脏形图案
4．肾形图案
在半径为80的圆周上选取28个圆心坐标，将当前圆心坐标与画布中心位置的横向距离作为半径分别绘制28个圆。可编写的HTML代码如下。
<!DOCTYPE html>
<head>
<title>肾形图案</title>
<script type="text/javascript">
function draw(id)
{
var canvas=document.getElementById(id);
if (canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.strokeStyle="red";
context.lineWidth=2;
var r1=80;
var PI=3.1415926;
for(a=0;a<=2*PI;a+=PI/27)
{
x=200+r1*Math.cos(a);
y=150+r1*Math.sin(a);
rs=Math.abs(x-200);
context.beginPath();
context.arc(x,y,rs,0,Math.PI*2,true);
context.closePath();
context.stroke();
}
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出肾形图案，如图7所示。
图7 肾形图案
