JavaScript图形实例：太极图

   JavaScript图形实例：太极图    

      在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个绘制圆与圆弧的方法，其基本格式为：

      void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);

      其中，参数x和y是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示作图时应该逆时针画（true）还是顺时针画（false）。

1．太极图

通过绘制4个半圆弧和两个小圆的方式可以绘制一个太极图。编写HTML文件的内容如下。

在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出如图1所示的太极图。

   

图1  太极图

2．奥运五环

我们可以通过绘制5个圆环的方式绘制奥运五环图。编写如下的HTML文件。

在浏览器中打开包含这段HTML代码的html文件，可以在画布中绘制出如图2所示的奥运五环图案。

 

图2  奥运五环

3．渔网图案

我们可以通过循环适当地绘制有规律的圆弧的方式，绘制出渔网图案。编写如下的HTML文件。

在浏览器中打开包含这段HTML代码的html文件，可以在画布中绘制出如图3所示的渔网图案。

  

图3  渔网

4．时钟

下面我们通过简单动画绘制一个时钟。编写如下的HTML文件。

在浏览器中打开包含这段HTML代码的html文件，可以在画布中呈现出如图4所示的时钟。

  

图4  时钟