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. 【Linux高频命令专题(12)】touch.md

    概述 一般在使用make的时候可能会用到,用来修改文件时间,或者新建一个不存在的文件. 命令格式 touch [选项]... 文件... 命令参数 -a 或--time=atime或--time=ac ...

  2. 企业用户2T（含秒传），普通用户20G

    周鸿祎一定要看的建议(要求置顶):可以解决本次云盘事件的建议!!! 2016-10-23 20:23 | 复制链接 | 淘帖 461334 本帖最后由 cqthxin 于 2016-10-23 20: ...

  3. JAX-RS 2.0 REST客户端编程实例

    JAX-RS 2.0 REST客户端编程实例 2014/01/28 | 分类: 基础技术, 教程 | 0 条评论 | 标签: JAX-RS, RESTFUL 分享到:3 本文由 ImportNew - ...

  4. Shell 是个什么玩意

    Shell的定义: 计算机分为软件和硬件,管理计算机硬件的是操作系统,也就是我们说的kernel,而这个核心是需要被保护起来的. 那我们如何通过软件与硬件进行沟通,让硬件执行我们要完成的指令呢? 这个 ...

  5. MyEclipse 从数据库反向生成Hibernate实体类

    第一个大步骤 window-->open Perspective-->MyEclipse Java Persistence 进行了上面的 操作后会出现一个视图DB Brower:MyEcl ...

  6. maven 仓库下载缓慢，怎么解决

    maven下载jar的时候会去寻国外的地址,因此造成了下载jar很缓慢,影响开发效率,于是就出现maven镜像地址,可以使我们开发人员迅速下载相关的jar. 在maven的config的setting ...

  7. Collection_Other

    package com.bjsxt.others.que; import java.util.ArrayDeque; import java.util.Queue; /** * 使用队列模拟银行存款业 ...

  8. HDU 4965 矩阵快速幂

    顺手写了下矩阵类模板 利用到矩阵乘法的交换律 (A*B)^n == A * (B*A)^n-1 *B #include <cstdio> #include <cstring> ...

  9. bzoj2395

    分组赛时学到的最小乘积生成树模型,感觉这个思路非常神,可以说是数形结合的经典问题 由于生成树有两个权值,我们把每个生成树的权值表示成点坐标(sa,sb) 显然我们知道,乘积最小,那么点必然落在下凸壳上 ...

  10. UVa 10088 (Pick定理) Trees on My Island

    这种1A的感觉真好 #include <cstdio> #include <vector> #include <cmath> using namespace std ...