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

你可能感兴趣的:(JavaScript图形实例:太极图)