HTML 5：绘制旋转的太极图

r囧r小猫 2022-08-06 00:27 169阅读 0赞

![Center][]

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_jsfiddle.net_Web_Code_88c9d2g2_embedded_result]

原文首发：[http://www.ido321.com/1308.html][http_www.ido321.com_1308.html]

下一篇：[程序员成长道路上必经的几个阶段 ][Link 1]

[Center]: /images/20220806/15bb5220f97a42c3ad34811bba856223.png
[http_jsfiddle.net_Web_Code_88c9d2g2_embedded_result]: http://jsfiddle.net/Web_Code/88c9d2g2/embedded/result/
[http_www.ido321.com_1308.html]: http://www.ido321.com/1308.html
[Link 1]: http://www.ido321.com/1309.html

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5——Canvas绘制曲线

Canvas绘制曲线绘制曲线绘制圆形绘制弧形二次贝塞尔

太过爱你忘了你带给我的痛/ 2023年03月01日 09:17/ 0 赞/ 332 阅读

相关开源canvas比较高级的旋转的太极图的源码

一些代码部分我打了注释，清晰明了，有不懂得直接评论即可，然后就是废话不多说上代码 <!DOCTYPE html> <html> <head>

╰+哭是因爲堅強的太久メ/ 2022年11月26日 07:39/ 0 赞/ 159 阅读

相关 html5绘制div,HTML5 Canvas 绘制图像

canvas可以引入图像，它可以用于图片合成或者制作背景等。只要是 Gecko 支持的图像(如 PNG，GIF，JPEG等)都可以引入到 canvas 中，而且其它的 canv

本是古典何须时尚/ 2022年10月06日 13:56/ 0 赞/ 311 阅读

相关 HTML 5：绘制旋转的太极图

![Center][] HTML： <!DOCTYPE> <html> <head> <meta charset="utf-8" /

r囧r小猫/ 2022年08月06日 00:27/ 0 赞/ 170 阅读

相关 html5绘制图像

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年07月20日 15:11/ 0 赞/ 242 阅读

相关自动旋转的太极图

首先我们先看一个效果图 ![Center][] 首先创建一个工程 ![Center 1][] 创建一个继承自UIview的类TaijiView然后再.h文件中创建两个变

淩亂°似流年/ 2022年07月14日 12:12/ 0 赞/ 214 阅读

相关旋转的太极图

刚刚在网上看见一个太极图做loading，但是作者居然无良的不给效果图，于是我就气愤的给它实现了。果然是丑啊！希望不要丑哭！！源码非常简单，已经全部注释好了！

蔚落/ 2022年07月14日 07:13/ 0 赞/ 188 阅读

相关 html5的canvas旋转动画

<!DOCTYPE HTML> <html> <body> <canvas id="myCanv

以你之姓@/ 2022年07月13日 06:16/ 0 赞/ 289 阅读

相关【Html5】canvas绘制圆形

上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的先截个图： ![1334153306_3907.png][]

喜欢ヅ旅行/ 2022年06月13日 11:30/ 0 赞/ 286 阅读

相关（转）CSS实现一个会旋转的太极图案

画个会旋转的太极：以下部分直接赋值粘贴就好了 HTML部分： <!DOCTYPE html> <html lang="en"> <head>

ゞ浴缸里的玫瑰/ 2022年05月09日 11:36/ 0 赞/ 234 阅读