怎么用JS实现太极图案

发布时间：2022-09-23 09:39:44 作者：iii
来源：亿速云阅读：187

怎么用JS实现太极图案

太极图案是中国传统文化中的重要符号，代表了阴阳的平衡与和谐。在Web开发中，我们可以使用JavaScript和HTML5的Canvas技术来实现一个动态的太极图案。本文将详细介绍如何使用JavaScript绘制太极图案，并逐步解释代码的实现过程。

1. 准备工作

在开始编写代码之前，我们需要准备一个HTML文件，并在其中引入Canvas元素。Canvas是HTML5提供的一个绘图API，允许我们通过JavaScript在网页上绘制图形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极图案</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="taiji" width="400" height="400"></canvas>
    <script src="taiji.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个400x400像素的Canvas元素，并引入了一个名为taiji.js的JavaScript文件，该文件将包含我们绘制太极图案的代码。

2. 绘制太极图案的基本结构

太极图案由两个相互嵌套的半圆组成，分别代表阴阳。我们可以通过绘制两个半圆来实现太极图案的基本结构。

首先，我们需要获取Canvas的上下文对象，并设置一些基本的绘图参数。

const canvas = document.getElementById('taiji');
const ctx = canvas.getContext('2d');

const width = canvas.width;
const height = canvas.height;
const radius = width / 2;

接下来，我们定义一个函数来绘制太极图案。我们将使用arc方法来绘制半圆。

function drawTaiji() {
    // 清空画布
    ctx.clearRect(0, 0, width, height);

    // 绘制上半部分的白色半圆
    ctx.beginPath();
    ctx.arc(radius, radius, radius, 0, Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();

    // 绘制下半部分的黑色半圆
    ctx.beginPath();
    ctx.arc(radius, radius, radius, Math.PI, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();
}

drawTaiji();

在上面的代码中，我们首先清空了画布，然后分别绘制了上半部分的白色半圆和下半部分的黑色半圆。此时，我们已经绘制出了太极图案的基本结构。

3. 添加阴阳鱼眼

太极图案中，阴阳鱼眼是两个小圆，分别位于阴阳半圆的中心。我们可以通过绘制两个小圆来实现这一效果。

function drawTaiji() {
    // 清空画布
    ctx.clearRect(0, 0, width, height);

    // 绘制上半部分的白色半圆
    ctx.beginPath();
    ctx.arc(radius, radius, radius, 0, Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();

    // 绘制下半部分的黑色半圆
    ctx.beginPath();
    ctx.arc(radius, radius, radius, Math.PI, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    // 绘制黑色鱼眼
    ctx.beginPath();
    ctx.arc(radius, radius / 2, radius / 6, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    // 绘制白色鱼眼
    ctx.beginPath();
    ctx.arc(radius, radius + radius / 2, radius / 6, 0, 2 * Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();
}

drawTaiji();

在上面的代码中，我们在上半部分的白色半圆中绘制了一个黑色的小圆，表示阴鱼眼；在下半部分的黑色半圆中绘制了一个白色的小圆，表示阳鱼眼。此时，太极图案已经基本完成。

4. 添加旋转动画

为了使太极图案更加生动，我们可以为其添加一个旋转动画。我们可以使用requestAnimationFrame方法来实现动画效果。

首先，我们需要定义一个变量来存储旋转角度。

let angle = 0;

接下来，我们修改drawTaiji函数，使其能够根据旋转角度绘制太极图案。

function drawTaiji() {
    // 清空画布
    ctx.clearRect(0, 0, width, height);

    // 保存当前画布状态
    ctx.save();

    // 将画布原点移动到中心
    ctx.translate(radius, radius);

    // 旋转画布
    ctx.rotate(angle);

    // 绘制上半部分的白色半圆
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();

    // 绘制下半部分的黑色半圆
    ctx.beginPath();
    ctx.arc(0, 0, radius, Math.PI, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    // 绘制黑色鱼眼
    ctx.beginPath();
    ctx.arc(0, -radius / 2, radius / 6, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    // 绘制白色鱼眼
    ctx.beginPath();
    ctx.arc(0, radius / 2, radius / 6, 0, 2 * Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();

    // 恢复画布状态
    ctx.restore();
}

在上面的代码中，我们使用ctx.translate方法将画布的原点移动到中心，然后使用ctx.rotate方法旋转画布。最后，我们使用ctx.restore方法恢复画布的状态。

接下来，我们定义一个函数来更新旋转角度，并不断调用drawTaiji函数来绘制动画。

function animate() {
    angle += 0.01;
    drawTaiji();
    requestAnimationFrame(animate);
}

animate();

在上面的代码中，我们使用requestAnimationFrame方法来实现动画效果。每次调用animate函数时，旋转角度都会增加0.01弧度，并重新绘制太极图案。

5. 完整代码

以下是完整的JavaScript代码：

const canvas = document.getElementById('taiji');
const ctx = canvas.getContext('2d');

const width = canvas.width;
const height = canvas.height;
const radius = width / 2;

let angle = 0;

function drawTaiji() {
    // 清空画布
    ctx.clearRect(0, 0, width, height);

    // 保存当前画布状态
    ctx.save();

    // 将画布原点移动到中心
    ctx.translate(radius, radius);

    // 旋转画布
    ctx.rotate(angle);

    // 绘制上半部分的白色半圆
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();

    // 绘制下半部分的黑色半圆
    ctx.beginPath();
    ctx.arc(0, 0, radius, Math.PI, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    // 绘制黑色鱼眼
    ctx.beginPath();
    ctx.arc(0, -radius / 2, radius / 6, 0, 2 * Math.PI);
    ctx.fillStyle = 'black';
    ctx.fill();

    // 绘制白色鱼眼
    ctx.beginPath();
    ctx.arc(0, radius / 2, radius / 6, 0, 2 * Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();

    // 恢复画布状态
    ctx.restore();
}

function animate() {
    angle += 0.01;
    drawTaiji();
    requestAnimationFrame(animate);
}

animate();

6. 总结

通过本文的介绍，我们学习了如何使用JavaScript和Canvas技术绘制一个动态的太极图案。我们从基本的半圆绘制开始，逐步添加了阴阳鱼眼和旋转动画，最终实现了一个完整的太极图案。希望本文能够帮助你更好地理解Canvas绘图技术，并激发你在Web开发中的创造力。

怎么用JS实现太极图案

怎么用JS实现太极图案

1. 准备工作

2. 绘制太极图案的基本结构

3. 添加阴阳鱼眼

4. 添加旋转动画

5. 完整代码

6. 总结

相关阅读