3种方法（div法、css法、js法）制作html的旋转太极图技术頭條網

2020-04-02 16:54:55 易三一世

1.说明：

推荐指数：★★★★

通过动画太极的方法，增加学习兴趣，对html的结构和css、JavaScript、div的认识和了解会逐步深入。

2.复习html的结构框架

<code>


    
        
        <title>html结构基本框架代码/<title>
    
    
    
    

/<code>

3 div法

3.1 代码：复制下面的代码，命名为：div法.html，用浏览器打开即可。

<code>



    
    <title>div法的旋转的太极图/<title>





    


/<code>

3.2 效果图

4 css法

4.1 css法.html代码

<code>


    
    <title>css法的旋转的太极图/<title>
    
    
    <link>


    
    

/<code>

4.2 tj.css代码：注意与上面两个文件放在同一个文件夹下

<code>
.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);
        }
    }/<code>

4.3 效果图

5 js法=就是JavaScript法

5.1 js法.html代码：

<code>


    
        
        <title>js法的旋转的太极图/<title>
        
        
        
        
        <style><br>            canvas{<br>                display: block;<br>                margin: 20px auto;<br>                <br>            }<br>        /<style>
    

    
        
        <canvas>
    

/<code>

5.2>

<code>//注意到没有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);
}
/<code>