在逛论坛时,偶然看到一篇博文里提到用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