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：绘制旋转的太极图的更多相关文章

  1. Html5 绘制旋转的太极图

    采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示: 具体思路和绘制逻辑,在上图中已有说明,代码如下: <script type="text/javasc ...

  2. Winform GDI+绘图二：绘制旋转太极图

    大家好,今天有时间给大家带来Winform自绘控件的第二部分,也是比较有意思的一个控件:旋转太极图. 大家可以停下思考一下,如果让你来绘制旋转的太极图,大家有什么样的思路呢?我今天跟大家展示一下,我平 ...

  3. .NET绘制旋转太极图

    .NET绘制旋转太极图 我之前发了一篇<用.NET写"算命"程序>的文章,但有人纷纷提出了质疑,认为没有"科学"(mi xin)依据

  4. 纯css3实现旋转的太极图

    效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...

  5. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  6. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  7. C#利用GDI+绘制旋转文字等效果

    C#中利用GDI+绘制旋转文本的文字,网上有很多资料,基本都使用矩阵旋转的方式实现.但基本都只提及按点旋转,若要实现在矩形范围内旋转文本,资料较少.经过琢磨,可以将矩形内旋转转化为按点旋转,不过需要经 ...

  8. 测试canvas绘制旋转文字的性能

    canvas 绘制各种动画效果时,我们经常会使用画布旋转,使绘制上去的元素有旋转的效果. 最近在项目中碰到了很严重的性能问题,经常排查发现是因为绘制批量文字时使用了画布旋转,且每行文字的旋转角度是不一 ...

  9. 基于CSS3伪元素和动画绘制旋转太极图

    通过CSS3的动画知识来完成一个旋转的太极. 任务 1.创建一个div,用CSS控制其大小.边框.位置等,做成一个静态的圆形,一半为红色一半为白色. 2.用div的伪元素位置两个圆环并放置核实位置,使 ...

随机推荐

  1. [@Controller]3 详解@CookieValue,@PathVariable,@RequestBody,@RequestHeader,@RequestParam

    [@Controller]3 详解@CookieValue,@PathVariable,@RequestBody,@RequestHeader,@RequestParam 转载:http://blog ...

  2. Android Studio删除工程里面无用的代码和资源

    如果你是一个经常开发android应用程序或者做android维护项目的人,我想说你对我谈论的这个话题,一定会感兴趣的. 因为只有做到了这两点,你的项目生成的apk包才会更小,而不是随着你的开发和维护 ...

  3. C++：类的组合

    在类中定义的数据成员一般都是基本数据类型或服复合数据类型.但是还可以根据需要使用 其他类的对象作为正在声明的数据成员.复杂的对象还可以有比较简单的对象一某种方式组合 而成,复杂对象和组成它的简单对象之 ...

  4. 对Memcached使用的总结和使用场景

    1.memcached是什么 Memcached 常被用来加速应用程序的处理,在这里,我们将着重于介绍将它部署于应用程序和环境中的最佳实践.这包括应该存储或不应存储哪些.如何处理数据的灵活分布以 及如 ...

  5. HDU 4351 Digital root 线段树区间合并

    依然不是十分理解……待考虑…… #include <cstdio> #include <cstring> #include <cstdlib> #include & ...

  6. Drawit插件

    gvim用不了画矩形的功能,只能在vim下用 \di,\ds开始/结束画图(Vim里\按键没有被映射,可以做leader按键) 用鼠标选择一块之后,\b画矩形,\e画椭圆 选单行\a画箭头,\l画线 ...

  7. Eclipse常见设置及快捷键使用总结(更新中)

    Eclipse中常见设置: 1.Eclipse在保存时设置自动去掉多余的import和格式化代码 路径: window --> preferences --> java --> Ed ...

  8. bzoj1486: [HNOI2009]最小圈

    二分+dfs. 这道题求图的最小环的每条边的权值的平均值μ. 这个平均值是大有用处的,求它我们就不用记录这条环到底有几条边构成. 如果我们把这个图的所有边的权值减去μ,就会出现负环. 所以二分求解. ...

  9. UVa 1152 4 Values whose Sum is 0

    题意:给出n,四个集合a,b,c,d每个集合分别有n个数,分别从a,b,c,d中选取一个数相加,问使得a+b+c+d=0的选法有多少种 看的紫书,先试着用hash写了一下, 是用hash[]记录下来a ...

  10. 获取资源ID

    比如,设置一张gif图片的宽高 gif.setShowDimension((int) CommonUtil.getDimen(R.dimen.gif), (int) CommonUtil.getDim ...