为何尝试于Canvas中绘出太极，必要且有趣！

2023-10-31 14:00:59

想用代码实现一幅艺术作品？Canvas 就是你的绝佳选择。Canvas 是 HTML5 中的一个元素，它允许你在网页上创建和绘制图形。使用 Canvas，你可以绘制出各种各样的图形，从简单的线和圆到复杂的图像和动画。在本教程中，我们将向你展示如何使用 Canvas 来绘制一个太极图。

首先，让我们来了解一下 Canvas 的基本知识。

Canvas 元素是一个矩形区域，它可以被用来绘制图形。Canvas 的宽和高可以通过它的 width 和 height 属性来设置。要绘制图形，你需要使用 Canvas 的 getContext() 方法来获取一个 CanvasRenderingContext2D 对象。这个对象提供了各种方法来绘制图形，包括线、圆、矩形和文本。

现在，让我们开始绘制太极图吧。

首先，我们需要创建一个新的 Canvas 元素。你可以使用以下 HTML 代码来创建一个 Canvas 元素：

<canvas id="canvas" width="500" height="500"></canvas>

接下来的步骤是创建一个 CanvasRenderingContext2D 对象。你可以使用以下 JavaScript 代码来创建一个 CanvasRenderingContext2D 对象：

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

现在，我们可以开始绘制太极图了。首先，我们需要绘制一个黑色的圆圈。你可以使用以下 JavaScript 代码来绘制一个黑色的圆圈：

ctx.beginPath();
ctx.arc(250, 250, 200, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();

接下来的步骤是绘制一个白色的圆圈。你可以使用以下 JavaScript 代码来绘制一个白色的圆圈：

ctx.beginPath();
ctx.arc(250, 250, 100, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();

最后，我们需要绘制两个小的圆圈。你可以使用以下 JavaScript 代码来绘制两个小的圆圈：

ctx.beginPath();
ctx.arc(150, 250, 50, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();

ctx.beginPath();
ctx.arc(350, 250, 50, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();