HTML 5:绘制旋转的太极图
HTML:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas绘制旋转太极</title>
</head>
<body>
<canvas id="face" width="200" height="200"></canvas>
</body>
</html>
JavaScript:
var canvas = document.getElementById("face");
var cxt = canvas.getContext('2d');
var r = 100; //半径
var pointX = 0; //圆心x坐标
var pointY = 0; //圆心y坐标 // 绘制扇形填充
function pie (g,radius,startAngle,endAngle,color,x,y)
{
g.fillStyle = color;
g.beginPath();
g.arc(x,y,radius,startAngle,endAngle,true);
g.closePath();
g.fill();
} var q = 0;
function redrawTaiji()
{
// 保存状态
cxt.save();
// 清理图像
cxt.clearRect(0,0,canvas.width,canvas.height);
cxt.translate(100,100);
q += Math.PI / 6;
cxt.rotate(q);
cxt.beginPath();
// 绘制两个最大圆
pie(cxt,r,3/4*Math.PI*2,5/4*Math.PI*2,"#FF072A",pointX,pointY);
pie(cxt,r,1/4*Math.PI*2,3/4*Math.PI*2,"#195089",pointX,pointY);
// 绘制两个中圆
pie(cxt,r/2,0,Math.PI*2,"#FF072A",pointX,pointY+r/2);
pie(cxt,r/2,0,Math.PI*2,"#195089",pointX,pointY-r/2);
// 绘制两个最小圆
pie(cxt,r/4,0,Math.PI*2,"#FF072A",pointX,pointY-r/2);
pie(cxt,r/4,0,Math.PI*2,"#195089",pointX,pointY+r/2);
cxt.closePath();
// 恢复状态
cxt.restore();
}
function initTaiji()
{
redrawTaiji();
setInterval(redrawTaiji,500);
}
initTaiji();
效果:http://jsfiddle.net/Web_Code/88c9d2g2/embedded/result/
原文首发:http://www.ido321.com/1308.html
下一篇:程序员成长道路上必经的几个阶段
HTML 5:绘制旋转的太极图的更多相关文章
- Html5 绘制旋转的太极图
采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示: 具体思路和绘制逻辑,在上图中已有说明,代码如下: <script type="text/javasc ...
- Winform GDI+绘图二:绘制旋转太极图
大家好,今天有时间给大家带来Winform自绘控件的第二部分,也是比较有意思的一个控件:旋转太极图. 大家可以停下思考一下,如果让你来绘制旋转的太极图,大家有什么样的思路呢?我今天跟大家展示一下,我平 ...
- .NET绘制旋转太极图
.NET绘制旋转太极图 我之前发了一篇<用.NET写"算命"程序>的文章,但有人纷纷提出了质疑,认为没有"科学"(mi xin)依据
- 纯css3实现旋转的太极图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...
- CSS3实现旋转的太极图(二):只用1个DIV
效果预览: PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...
- CSS3绘制旋转的太极图案(一)
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
- C#利用GDI+绘制旋转文字等效果
C#中利用GDI+绘制旋转文本的文字,网上有很多资料,基本都使用矩阵旋转的方式实现.但基本都只提及按点旋转,若要实现在矩形范围内旋转文本,资料较少.经过琢磨,可以将矩形内旋转转化为按点旋转,不过需要经 ...
- 测试canvas绘制旋转文字的性能
canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...
- 基于CSS3伪元素和动画绘制旋转太极图
通过CSS3的动画知识来完成一个旋转的太极. 任务 1.创建一个div,用CSS控制其大小.边框.位置等,做成一个静态的圆形,一半为红色一半为白色. 2.用div的伪元素位置两个圆环并放置核实位置,使 ...
随机推荐
- C#五层架构
UI Business Logic Layer Business Rule Layer Data Access Layer Data Definition Layer 简单工厂模式 simple fa ...
- 多线程+委托的安全访问(invoke)
1.声明方法 2.声明委托类型 3.创建委托对象 4.启动线程 5.在线程调用的方法里通过Control的Invoke方法执行委托 public Form1() { InitializeCompone ...
- 对象的继承关系在数据库中的实现方式和PowerDesigner设计
原文:对象的继承关系在数据库中的实现方式和PowerDesigner设计 在面向对象的编程中,使用对象的继承是一个非常普遍的做法,但是在关系数据库管理系统RDBMS中,使用的是外键表示实体(表)之间的 ...
- oracle lsnrctl status|start|stop
[oracle@redhat4 ~]$ lsnrctl status LSNRCTL for Linux: Version 11.2.0.1.0 - Production on 06-OCT-2015 ...
- [HDOJ2473]Junk-Mail Filter(并查集,删除操作,马甲)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2473 给两个操作:M X Y:将X和Y看成一类. S X:将X单独划归成一类. 最后问的是有多少类. ...
- [HDOJ1811]Rank of Tetris(并查集、拓扑排序)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1811 求一堆数据的拓扑序. 处理:x>y就是x到y一条边,x<y就是y到x一条边.关键问题 ...
- maven常用构建命令
mvn -v 查看maven版本 compile 编译项目 install 将项目加入到本地仓库中 clean 删除target test 测试 package 打包
- Qt 多线程学习
最近的项目上用到了关于多线程的知识,自己也比较感兴趣,所以就拿了那本<C++ GUI Qt4 编程>来学习. 这本书的第14章是关于多线程的知识,使用的Qt版本是Qt4.x.在下用的是最新 ...
- VS2005中乱码问题
VS2005打开某些文件(如.inc, js)的时候出现乱码: 解决方法: 工具 --> 选项 --> 文本编辑器 --> 将“自动检测不带签名的 UTF-8编码”选中保存即可. V ...
- Eclipse @override报错解决 必须覆盖超类方法
解决办法:Windows->Preferences-->java->Compiler-->compiler compliance level设置成1.6