JS Canvas动画之太极图

在逛论坛时,偶然看到一篇博文里提到用js绘制一个动态太极图,觉得挺有意思的,于是就开始动手自己也做了一个. 

原文链接: http://www.cnblogs.com/varlxj/p/taiji.html (请尊重原作者)

原文里面只能绘制一个图形,并且旋转的时候旋转的是canvas,于是我就做了点改变,使其同时支持多个图形绘制和旋转,同时用一个工厂类来进行控制,防止内存泄漏。

预览效果: http://115.29.151.25/AlgorithmReconstruction/html/index_Taiji.html (chrome里面直接展开控制台就可以看到代码了)

截图(有些浏览器里不能直接看到效果,所以,截张静态图展示):

部分代码展示: 太极类的核心代码---这里面基本都是注释

/**
 * @file 一个绘制太极图的工具类
 * @description 支持同时绘制多个太极,并且每一个都有自己的旋转函数
 * @author dailc
 */
{
	/**
	 * @description 匿名函数方法得到一个函数对象
	 * 这个对象就是一个工厂,用来管理太极类
	 * 这种写法是定义一个匿名函数并执行,左侧的变量得到该函数返回值
	 */
	var TaijiUtil = (function() {
		var FactoryObj = {};
		/**
		 * @description 生成一个太极图
		 * @param {Object} radius 半径 默认为画布的1/4
		 * @param {Object} canvas 所在画布
		 * @param {Object} xPosition 生成的x位置 默认为画布的中心
		 * @param {Object} yPosition 生成的y位置 默认为画布的中心
		 */
		function TaiJi(radius, canvas, xPosition, yPosition) {
			//默认值处理
			if (canvas == null ||
				!(canvas instanceof HTMLCanvasElement)) {
				window.alert('错误,没有传入画布对象!');
				return null;
			}
			if (radius == null || typeof(radi