整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
情提示：初學(xué)html大神繞道
簡(jiǎn)要說(shuō)明：太極分為六部分，兩塊大長(zhǎng)方體組成一個(gè)正方形，通過(guò)圓角處理組成一個(gè)圓，兩個(gè)八分之一大小的長(zhǎng)方形組成左上和右下半圓，兩個(gè)最小的正方形經(jīng)過(guò)處理為上下兩個(gè)圓，最底層為兩個(gè)大圓中間為小圓，上面為最小的兩個(gè)圓，顏色一層蓋一層，調(diào)試為最后結(jié)果，其實(shí)黑白最好。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
********************************
.說(shuō)明：
推薦指數(shù)：★★★★
通過(guò)動(dòng)畫(huà)太極的方法，增加學(xué)習(xí)興趣，對(duì)html的結(jié)構(gòu)和css、JavaScript、div的認(rèn)識(shí)和了解會(huì)逐步深入。
2.復(fù)習(xí)html的結(jié)構(gòu)框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html結(jié)構(gòu)基本框架代碼</title>
</head>
<body>
</body>
</html>3 div法
3.1 代碼：復(fù)制下面的代碼，命名為：div法.html，用瀏覽器打開(kāi)即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div法的旋轉(zhuǎn)的太極圖</title>
</head>
<!--單獨(dú)style，不在head和body，只是在body內(nèi)有一個(gè)div容器-->
<style>
div{
width: 0;
/*這個(gè)高就是黑色圓形和白色圓形的直徑和*/
height: 200px;
/*黑色太極部分的圈帶動(dòng)的黑色的陰影*/
border-left: 100px solid black;
/*白色太極部分的圈帶動(dòng)的白色的陰影*/
border-right: 100px solid #fff;
box-shadow: 0 0 15px rgba(0,0,0,.5);
/*旋轉(zhuǎn)半徑100*/
border-radius: 100px;
/*旋轉(zhuǎn)速度定義,越小越快*/
-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;
/*黑色的小半圓，因?yàn)檗D(zhuǎn)動(dòng)拖動(dòng)黑色陰影*/
box-shadow: 0 100px 0 black;
}
div:after{
content: "";
position: absolute;
/*height是太極里面小圓圈的高30，要和border-radius30一致，才畫(huà)出圓*/
height: 30px;
/*這個(gè)是顯示小圓圈的,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;
}
/*旋轉(zhuǎn)角度函數(shù)定義*/
@-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法的旋轉(zhuǎn)的太極圖</title>
<!--css導(dǎo)入和js導(dǎo)入不一樣，請(qǐng)注意-->
<!--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代碼：注意與上面兩個(gè)文件放在同一個(gè)文件夾下
.tj{
width: 100px;
height: 200px;
border: solid black;
border-width: 2px 100px 2px 2px;
background-color: #fff;
border-radius: 50%;
position: absolute;
/*run是動(dòng)起來(lái)的函數(shù)，在最后面設(shè)置和定義*/
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動(dòng)起來(lái)的函數(shù)定義*/
@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法的旋轉(zhuǎn)的太極圖</title>
<!--注意下面2鐘都可以，主要是瀏覽器都支持html5-->
<!--script-- src="script.js" type="text/javascript"></!--script-->
<script src="./script.js"></script>
<!--簡(jiǎn)單的css內(nèi)容就這樣寫(xiě)在下面，如果css比較復(fù)雜，則需要外部導(dǎo)入-->
<style type="text/css">
canvas{
display: block;
margin: 20px auto;
}
</style>
</head>
<body onload="main()">
<!--畫(huà)布大小,畫(huà)布框的線顏色藍(lán)色設(shè)置，solid blue是指畫(huà)布外框的顏色為藍(lán)色-->
<canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>
</body>
</html>5.2 script.js代碼：與上面html放在同一個(gè)文件夾下
//注意到?jīng)]有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");
// 畫(huà)布大小有關(guān)
ctx.clearRect(0, 0, 300, 300);
// 線條寬度0~10，均可
ctx.lineWidth=0;
ctx.save();
// 旋轉(zhuǎn)的中心點(diǎn)的坐標(biāo)位置150,150
ctx.translate(150,150);
ctx.rotate(angle);
// 太極黑色部分
ctx.fillStyle="black";
ctx.beginPath();
// 注意幾個(gè)函數(shù)數(shù)值的關(guān)系，120,60，半徑和坐標(biāo)的關(guān)系，如果要縮小半徑，那么坐標(biāo)也需要調(diào)整
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();
//畫(huà)圓的函數(shù)：-145,0是坐標(biāo)，15是半徑，2*Math.PI是一個(gè)圓，一個(gè)π是半圓
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();
// 旋轉(zhuǎn)角度一次增加多少
ctx.restore();
angle +=0.02;
// 50代表轉(zhuǎn)速，越大越慢，越小越快
},1);
}
5.3 效果圖
6 值得收藏，慢慢回味。
html5新增了一個(gè)canvas元素，用于在網(wǎng)頁(yè)上生成一塊矩形區(qū)域，用于繪制圖像，功能非常強(qiáng)大，下面我來(lái)簡(jiǎn)單介紹一下
如上圖所示，如果不給canvas設(shè)置寬高，默認(rèn)寬是300px，高是150px。同時(shí)，canvas默認(rèn)是透明的
我們可以給它設(shè)置寬高，邊框，甚至背景顏色。
注意，這邊設(shè)置的寬高是畫(huà)布的屬性，和style的是不一樣的
要想使用canvas,必須先渲染上下文，創(chuàng)建context對(duì)象，并獲取2D運(yùn)行環(huán)境
然后就可以開(kāi)始畫(huà)圖了
畫(huà)圖之前我們要先了解下是畫(huà)圖是根據(jù)什么定位的，答案是坐標(biāo)，而且這個(gè)這邊我們平時(shí)了解的是上下翻轉(zhuǎn)的，不過(guò)到和網(wǎng)頁(yè)css定位差不多
如果剛開(kāi)始畫(huà)圖確定坐標(biāo)不習(xí)慣的可以自己寫(xiě)個(gè)方法轉(zhuǎn)換成正常的（x,canvasHeight-y）
這邊畫(huà)線也沒(méi)什么好講的，網(wǎng)上都有
這邊要注意的是設(shè)置線條屬性值一定要在stroke之前，好比你自己拿筆畫(huà)畫(huà)，你肯定是先挑選畫(huà)筆吧，總不能畫(huà)完了（stroke）之后在挑筆吧...
這邊線條還有一個(gè)屬性比較有意思就是lineCap，設(shè)置了線條的格式，有三個(gè)值：butt，round,square;看下面就知道效果了
一個(gè)是正常的，一個(gè)是兩端添加圓形線帽，一個(gè)是兩端添加方形線帽
還可以連續(xù)畫(huà)折現(xiàn)
這時(shí)候有個(gè)lineJoin屬性，可以控制線段連接處的線條風(fēng)格，值有bevel，round，miter
當(dāng)值為miter時(shí)，會(huì)多一個(gè)屬性miterLimit（定義最大斜接長(zhǎng)度）多數(shù)為角度比較小的時(shí)候才會(huì)有這種情況
看miterLimit=5時(shí)，斜接長(zhǎng)度大于5，
只能按照bevel展示，這時(shí)候加大miterLimit的值就能恢復(fù)正常
這個(gè)連接的屬性還是有用的，有的時(shí)候畫(huà)復(fù)雜的圖形，連接的不好會(huì)很丑。
矩形的繪畫(huà)還是比較簡(jiǎn)單的
有三種畫(huà)法
1、一種是用線條構(gòu)建，使用closePath()閉合折線圖形
先畫(huà)邊框再填充顏色
看到?jīng)]，這邊有意思的是線框被占了是不是。
2、第二種相當(dāng)于分離進(jìn)化版
3、第三種直接填充畫(huà)矩形，再畫(huà)邊框，當(dāng)然你也可以不畫(huà)
先來(lái)一個(gè)表達(dá)式吧
ctx.arc(x ,y,r,sAngle,eAngle,counterclockwise); 注意是arc不是src....
x,y 分別圓心的坐標(biāo)；r為半徑；sAngle為起始角；eAngle為結(jié)束角；counterclockwise規(guī)定逆時(shí)針還是順時(shí)針，默認(rèn)true為順時(shí)針
可以填充顏色
來(lái)個(gè)例子，畫(huà)個(gè)中國(guó)太極
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
