用HTML5怎么画太极

在HTML5中，我们可以使用Canvas元素来绘制太极图案，太极图案由阴阳两部分组成，象征着宇宙的阴阳平衡,下面我将详细介绍如何在HTML5中绘制太极图案。

我们需要创建一个HTML文件，并在其中添加一个Canvas元素,以下是基本的HTML结构：

Markup

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>绘制太极图案</title>
</head>
<body>
    <canvas id="taiji" width="400" height="400"></canvas>
    <script src="taiji.js"></script>
</body>
</html>

用HTML5怎么画太极

我们需要创建一个JavaScript文件（例如taiji.js）,并在其中编写绘制太极图案的代码。

获取Canvas元素及其上下文

我们要在JavaScript中获取Canvas元素及其2D渲染上下文：

JavaScript

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

绘制太极图案

用HTML5怎么画太极

我们可以开始绘制太极图案,以下是绘制太极图案的详细步骤：

JavaScript

function drawTaiji() {
    // 绘制外圆
    ctx.beginPath();
    ctx.arc(200, 200, 200, 0, Math.PI * 2, true);
    ctx.stroke();
    // 绘制上半部分
    ctx.beginPath();
    ctx.arc(200, 100, 100, 0, Math.PI, false);
    ctx.fill();
    // 绘制下半部分
    ctx.beginPath();
    ctx.arc(200, 300, 100, 0, Math.PI, true);
    ctx.fill();
    // 绘制左半部分的小圆
    ctx.beginPath();
    ctx.arc(150, 200, 50, 0, Math.PI * 2, true);
    ctx.fillStyle = 'white';
    ctx.fill();
    // 绘制右半部分的小圆
    ctx.beginPath();
    ctx.arc(250, 200, 50, 0, Math.PI * 2, true);
    ctx.fillStyle = 'black';
    ctx.fill();
    // 绘制左半部分的眼睛
    ctx.beginPath();
    ctx.arc(125, 175, 10, 0, Math.PI * 2, true);
    ctx.fillStyle = 'black';
    ctx.fill();
    // 绘制右半部分的眼睛
    ctx.beginPath();
    ctx.arc(275, 225, 10, 0, Math.PI * 2, true);
    ctx.fillStyle = 'white';
    ctx.fill();
}
// 调用绘制太极图案的函数
drawTaiji();