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>

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>

</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出笑脸图案，如图1所示。

图1 笑脸图案

再例如，编写如下的HTML文件。

<!DOCTYPE html>

<head>

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>

<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>

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>

<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas！

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出圆周上的圆图案，如图3所示。

图3 圆周上的圆图案

上面绘制的圆的颜色全部采用蓝色，若颜色采用rgb函数计算，可以修改上述HTML文件如下：

<!DOCTYPE html>

<head>

<title>圆周上的圆（二）</title>

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>

<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas！

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出圆周上的圆图案，如图4所示。

图4 圆周上的圆

2．圆的叠加

随机选定40个圆心坐标，绘制50个半径为40的圆，并用给定颜色进行填充。可编写的HTML代码如下。

<html>

<head>

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>

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出圆的叠加图案，如图5所示。

图5 圆的叠加图案

3．心脏形图案

在半径为60的圆周上选取28个圆心坐标，根据当前圆心坐标的椭圆公式计算出半径，按计算的半径分别绘制28个圆。可编写的HTML代码如下。

<!DOCTYPE html>

<head>

<title>心脏形图案</title>

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>

<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas！

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出心脏形图案，如图6所示。

图6 心脏形图案

4．肾形图案

在半径为80的圆周上选取28个圆心坐标，将当前圆心坐标与画布中心位置的横向距离作为半径分别绘制28个圆。可编写的HTML代码如下。

<!DOCTYPE html>

<head>

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>

<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！

</canvas>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出肾形图案，如图7所示。

图7 肾形图案