html5 實(shí)現(xiàn)旋轉(zhuǎn)太極

情提示：初學(xué)html大神繞道

簡要說明：太極分為六部分，兩塊大長方體組成一個正方形，通過圓角處理組成一個圓，兩個八分之一大小的長方形組成左上和右下半圓，兩個最小的正方形經(jīng)過處理為上下兩個圓，最底層為兩個大圓中間為小圓，上面為最小的兩個圓，顏色一層蓋一層，調(diào)試為最后結(jié)果，其實(shí)黑白最好。

********************************

.說明：

推薦指數(shù)：★★★★

通過動畫太極的方法，增加學(xué)習(xí)興趣，對html的結(jié)構(gòu)和css、JavaScript、div的認(rèn)識和了解會逐步深入。

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，用瀏覽器打開即可。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>div法的旋轉(zhuǎn)的太極圖</title>
</head>
<!--單獨(dú)style，不在head和body，只是在body內(nèi)有一個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);
    /*旋轉(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)動拖動黑色陰影*/
    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;
}
/*旋轉(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)入不一樣，請注意-->
    <!--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是動起來的函數(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動起來的函數(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>
        <!--簡單的css內(nèi)容就這樣寫在下面，如果css比較復(fù)雜，則需要外部導(dǎo)入-->
        <style type="text/css">
            canvas{
                display: block;
                margin: 20px auto;
                
            }
        </style>
    </head>

    <body onload="main()">
        <!--畫布大小,畫布框的線顏色藍(lán)色設(shè)置，solid blue是指畫布外框的顏色為藍(lán)色-->
        <canvas width="300" height="300" id="canvas"style="border:1px solid blue"></canvas>
    </body>

</html>

5.2 script.js代碼：與上面html放在同一個文件夾下

//注意到?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");
        // 畫布大小有關(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();
        // 注意幾個函數(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();
        //畫圓的函數(shù)：-145,0是坐標(biāo)，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();
        // 旋轉(zhuǎn)角度一次增加多少
        ctx.restore();
        angle +=0.02;
    // 50代表轉(zhuǎn)速，越大越慢，越小越快
    },1);
}

5.3 效果圖

6 值得收藏，慢慢回味。

tml5 canvas元素使用1

html5新增了一個canvas元素，用于在網(wǎng)頁上生成一塊矩形區(qū)域，用于繪制圖像，功能非常強(qiáng)大，下面我來簡單介紹一下

在頁面中添加canvas

如上圖所示，如果不給canvas設(shè)置寬高，默認(rèn)寬是300px，高是150px。同時，canvas默認(rèn)是透明的

我們可以給它設(shè)置寬高，邊框，甚至背景顏色。

注意，這邊設(shè)置的寬高是畫布的屬性，和style的是不一樣的

canvas的使用

要想使用canvas,必須先渲染上下文，創(chuàng)建context對象，并獲取2D運(yùn)行環(huán)境

然后就可以開始畫圖了

畫圖之前我們要先了解下是畫圖是根據(jù)什么定位的，答案是坐標(biāo)，而且這個這邊我們平時了解的是上下翻轉(zhuǎn)的，不過到和網(wǎng)頁css定位差不多

如果剛開始畫圖確定坐標(biāo)不習(xí)慣的可以自己寫個方法轉(zhuǎn)換成正常的（x,canvasHeight-y）

canvas畫線

這邊畫線也沒什么好講的，網(wǎng)上都有

這邊要注意的是設(shè)置線條屬性值一定要在stroke之前，好比你自己拿筆畫畫，你肯定是先挑選畫筆吧，總不能畫完了（stroke）之后在挑筆吧...

這邊線條還有一個屬性比較有意思就是lineCap，設(shè)置了線條的格式，有三個值：butt，round,square;看下面就知道效果了

一個是正常的，一個是兩端添加圓形線帽，一個是兩端添加方形線帽

還可以連續(xù)畫折現(xiàn)

這時候有個lineJoin屬性，可以控制線段連接處的線條風(fēng)格，值有bevel，round，miter

當(dāng)值為miter時，會多一個屬性miterLimit（定義最大斜接長度）多數(shù)為角度比較小的時候才會有這種情況

看miterLimit=5時，斜接長度大于5，

只能按照bevel展示，這時候加大miterLimit的值就能恢復(fù)正常

這個連接的屬性還是有用的，有的時候畫復(fù)雜的圖形，連接的不好會很丑。

canvas畫矩形

矩形的繪畫還是比較簡單的

有三種畫法

1、一種是用線條構(gòu)建，使用closePath()閉合折線圖形

先畫邊框再填充顏色

看到?jīng)]，這邊有意思的是線框被占了是不是。

2、第二種相當(dāng)于分離進(jìn)化版

3、第三種直接填充畫矩形，再畫邊框，當(dāng)然你也可以不畫

canvas畫圓

先來一個表達(dá)式吧

ctx.arc(x ,y,r,sAngle,eAngle,counterclockwise); 注意是arc不是src....

x,y 分別圓心的坐標(biāo)；r為半徑；sAngle為起始角；eAngle為結(jié)束角；counterclockwise規(guī)定逆時針還是順時針，默認(rèn)true為順時針

可以填充顏色

來個例子，畫個中國太極

在線咨詢

上一篇：SketchBook – 新一代強(qiáng)大專業(yè)的跨平臺自然
下一篇：更加直觀的AR導(dǎo)航

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商