推举指数：★★★★
通过动画太极的方法，增加学习兴趣，对html的构造和css、JavaScript、div的认识和理解会逐步深入。
2.复习html的构造框架
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>html构造基本框架代码</title> </head> <body> </body></html>
3 div法
3.1 代码：复制下面的代码，命名为：div法.html，用浏览器打开即可。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>div法的旋转的太极图</title></head><!--单独style，不在head和body，只是在body内有一个div容器--><style>div{ width: 0; /这个高便是玄色圆形和白色圆形的直径和/ height: 200px; /玄色太极部分的圈带动的玄色的阴影/ border-left: 100px solid black; /白色太极部分的圈带动的白色的阴影/ border-right: 100px solid #fff; box-shadow: 0 0 15px rgba(0,0,0,.5); /旋转半径100/ border-radius: 100px; /旋转速率定义,越小越快/ -webkit-animation:rotation 2.5s linear infinite;}div:before{ content: ""; position: absolute; height: 100px; z-index: 1; border-radius: 100px; /白色的小半圆/ border-left: 50px solid #fff; border-right: 50px solid #fff; left: -50px; /玄色的小半圆，由于迁徙改变拖动玄色阴影/ box-shadow: 0 100px 0 black;}div:after{ content: ""; position: absolute; /height是太极里面小圆圈的高30，要和border-radius30同等，才画出圆/ height: 30px; /这个是显示小圆圈的,0便是不显示/ z-index: 1; border-radius: 30px; border-left: 15px solid; border-right: 15px solid; /top和left，决定小圆圈白色和玄色的位置/ top: 40px; left: -15px; /玄色太极部分里面的小白色圆圈/ box-shadow: 0 100px 0 white;}/旋转角度函数定义/@-webkit-keyframes rotation { 0% {-webkit-transform:rotate(0deg);} 100% {-webkit-transform:rotate(-360deg);}}</style><body> <div></div></body></html>
3.2 效果图
4 css法
4.1 css法.html代码
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css法的旋转的太极图</title> <!--css导入和js导入不一样，请把稳--> <!--script-- src="./tj.css"></!--script--> <link rel="stylesheet" type="text/css" href="./tj.css"></head><body> <div class="tj"></div> </body></html>
4.2 tj.css代码：把稳与上面两个文件放在同一个文件夹下
.tj{ width: 100px; height: 200px; border: solid black; border-width: 2px 100px 2px 2px; background-color: #fff; border-radius: 50%; position: absolute; /run是动起来的函数，在末了面设置和定义/ animation: run 2s linear infinite; margin: auto; top: 0; left: 0; right: 0; bottom: 0;}.tj:before{ content: " "; position: absolute; width: 28px; height: 28px; background-color: black; /36=(100-28)/2得到的，是小白色圆圈的半径/ border: 36px #ffffff solid; border-radius: 50%; top: 0; left: 50%;}.tj:after{ content: " "; position: absolute; width: 28px; height: 28px; background-color: #ffffff; /36=(100-28)/2得到的，是小玄色圆圈的半径/ border: 36px black solid; border-radius: 50%; top: 50%; left: 50%;}/run动起来的函数定义/@keyframes run{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }
4.3 效果图
5 js法=便是JavaScript法
5.1 js法.html代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>js法的旋转的太极图</title> <!--把稳下面2钟都可以，紧张是浏览器都支持html5--> <!--script-- src="script.js" type="text/javascript"></!--script--> <script src="./script.js"></script> <!--大略的css内容就这样写不才面，如果css比较繁芜，则须要外部导入--> <style type="text/css"> canvas{ display: block; margin: 20px auto; } </style> </head> <body onload="main()"> <!--画布大小,画布框的线颜色蓝色设置，solid blue是指画布外框的颜色为蓝色--> <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas> </body></html>
5.2 script.js代码：与上面html放在同一个文件夹下
//把稳到没有null=0，效果是一样的var angle = 0;//var canvas = null;//var ctx = null;var canvas = 0;var ctx = 0;function main(){ window.setInterval(function() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); // 画布大小有关 ctx.clearRect(0, 0, 300, 300); // 线条宽度0~10，均可 ctx.lineWidth = 0; ctx.save(); // 旋转的中央点的坐标位置150,150 ctx.translate(150,150); ctx.rotate(angle); // 太极玄色部分 ctx.fillStyle = "black"; ctx.beginPath(); // 把稳几个函数数值的关系，120,60，半径和坐标的关系，如果要缩小半径，那么坐标也须要调度 ctx.arc(0, 0, 120, 0, Math.PI, true); ctx.fill(); ctx.closePath(); // 太极白色部分 ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(0, 0, 120, 0, Math.PI, false); ctx.fill(); ctx.closePath(); // 太极玄色部分 ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(60, -0.6, 60, 0, Math.PI, false); ctx.fill(); ctx.closePath(); // 太极白色部分 ctx.fillStyle = "white"; ctx.lineWidth = 0; ctx.beginPath(); ctx.arc(-60, 0, 60, 0, Math.PI, true); ctx.fill(); ctx.closePath(); // 白色太极部分里面的小玄色圆圈 ctx.fillStyle = "black"; ctx.beginPath(); //画圆的函数：-145,0是坐标，15是半径，2Math.PI是一个圆，一个π是半圆 ctx.arc(-60, 0, 15, 0, 2Math.PI, false); ctx.fill(); ctx.closePath(); // 玄色太极部分里面的小白色圆圈 ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(60, 0, 15, 0, 2Math.PI, false); ctx.fill(); ctx.closePath(); // 旋转角度一次增加多少 ctx.restore(); angle += 0.02; // 50代表转速，越大越慢，越小越快 },1);}
5.3 效果图
6 值得收藏，逐步回味。
