整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
情提示：初学html大神绕道
简要说明：太极分为六部分，两块大长方体组成一个正方形，通过圆角处理组成一个圆，两个八分之一大小的长方形组成左上和右下半圆，两个最小的正方形经过处理为上下两个圆，最底层为两个大圆中间为小圆，上面为最小的两个圆，颜色一层盖一层，调试为最后结果，其实黑白最好。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
********************************
.说明：
推荐指数：★★★★
通过动画太极的方法，增加学习兴趣，对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是半径，2*Math.PI是一个圆，一个π是半圆
ctx.arc(-60, 0, 15, 0, 2*Math.PI, false);
ctx.fill();
ctx.closePath();
// 黑色太极部分里面的小白色圆圈
ctx.fillStyle="white";
ctx.beginPath();
ctx.arc(60, 0, 15, 0, 2*Math.PI, false);
ctx.fill();
ctx.closePath();
// 旋转角度一次增加多少
ctx.restore();
angle +=0.02;
// 50代表转速，越大越慢，越小越快
},1);
}
5.3 效果图
6 值得收藏，慢慢回味。
html5新增了一个canvas元素，用于在网页上生成一块矩形区域，用于绘制图像，功能非常强大，下面我来简单介绍一下
如上图所示，如果不给canvas设置宽高，默认宽是300px，高是150px。同时，canvas默认是透明的
我们可以给它设置宽高，边框，甚至背景颜色。
注意，这边设置的宽高是画布的属性，和style的是不一样的
要想使用canvas,必须先渲染上下文，创建context对象，并获取2D运行环境
然后就可以开始画图了
画图之前我们要先了解下是画图是根据什么定位的，答案是坐标，而且这个这边我们平时了解的是上下翻转的，不过到和网页css定位差不多
如果刚开始画图确定坐标不习惯的可以自己写个方法转换成正常的（x,canvasHeight-y）
这边画线也没什么好讲的，网上都有
这边要注意的是设置线条属性值一定要在stroke之前，好比你自己拿笔画画，你肯定是先挑选画笔吧，总不能画完了（stroke）之后在挑笔吧...
这边线条还有一个属性比较有意思就是lineCap，设置了线条的格式，有三个值：butt，round,square;看下面就知道效果了
一个是正常的，一个是两端添加圆形线帽，一个是两端添加方形线帽
还可以连续画折现
这时候有个lineJoin属性，可以控制线段连接处的线条风格，值有bevel，round，miter
当值为miter时，会多一个属性miterLimit（定义最大斜接长度）多数为角度比较小的时候才会有这种情况
看miterLimit=5时，斜接长度大于5，
只能按照bevel展示，这时候加大miterLimit的值就能恢复正常
这个连接的属性还是有用的，有的时候画复杂的图形，连接的不好会很丑。
矩形的绘画还是比较简单的
有三种画法
1、一种是用线条构建，使用closePath()闭合折线图形
先画边框再填充颜色
看到没，这边有意思的是线框被占了是不是。
2、第二种相当于分离进化版
3、第三种直接填充画矩形，再画边框，当然你也可以不画
先来一个表达式吧
ctx.arc(x ,y,r,sAngle,eAngle,counterclockwise); 注意是arc不是src....
x,y 分别圆心的坐标；r为半径；sAngle为起始角；eAngle为结束角；counterclockwise规定逆时针还是顺时针，默认true为顺时针
可以填充颜色
来个例子，画个中国太极
*请认真填写需求信息，我们会在24小时内与您取得联系。
