Web前端之太极八卦图、伏羲先天八卦、Css计算、指南针、canvas

本文链接：https://blog.csdn.net/weixin_51157081/article/details/117775652

效果图

PC端(伏羲先天八卦)

Html

<div class="w_680 d_f fd_c ai_c pt_20 pb_20">
    <h3>先天八卦(伏羲八卦)</h3>

    <div id="idBox" class="w_500 h_500 mt_10 d_f jc_c ai_c radius_50_ bc_FFDF00">
        <div class="p_a">
            <canvas id="idCanvas" width="200" height="200"></canvas>
        </div>
        <div class="p_a">
            <div id="idThing" class="p_r d_f jc_c ai_c"></div>
        </div>
    </div>

    <div class="w_500 mt_20 d_f jc_sb">
        <span class="flex_1">0deg</span>
        <input class="flex_5 c_p" type="range" min=0 max=360 value=0 oninput="handleSlider(this)">
    </div>
</div>

JavaScript(太极图canvas)

init();

function init() {
    // 获取到画布元素
    let idCanvas = document.getElementById("idCanvas");
    // 通过画布元素获取到上下文（画笔）
    let ctx = idCanvas.getContext("2d");

    // 右边黑色的半圆
    draw1(ctx, '#000000', 100, 100, 100, false);

    // 左边白色的圆
    draw1(ctx, '#ffffff', 100, 100, 100, true);

    // 右上边白色的小圆
    draw1(ctx, '#ffffff', 100, 50, 50, false);

    // 左下边黑色的小圆
    draw1(ctx, '#000000', 100, 150, 50, true);

    // 黑色的小圆点
    draw2(ctx, '#000000', 100, 50, 20);

    // 白色的小圆点
    draw2(ctx, '#ffffff', 100, 150, 20);
}

function draw1(ctx, f, x, y, r, tf) {
    ctx.fillStyle = f;
    ctx.beginPath();
    ctx.arc(x, y, r, (Math.PI / 180) * 270, (Math.PI / 180) * 90, tf);
    ctx.fill();
}

function draw2(ctx, f, x, y, r) {
    ctx.fillStyle = f;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fill();
}

JavaScript(八卦图/核心代码)

function handle(list) {
    // 半径
    let radius = 168,
        len = list.length,
        piecDeg = 360 / len;

    list = list.map((item, i) => {
        let t = i * piecDeg,
            x = undefined,
            y = undefined;

        item.t = t;

        t = (Math.PI / 180) * t;
        x = Math.sin(t) * radius;
        y = -Math.cos(t) * radius;

        item.x = Math.round(x);
        item.y = Math.round(y);

        return item;
    });

    return list;
}