在画板上绘画：探索 Canvas 的艺术世界

2023-11-18 18:23:37

探索画布的世界：用 HTML5 和 JavaScript 实现数字艺术

在这个数字化的时代，艺术表达的界限被不断拓宽。HTML5 Canvas 是一个强大的工具，它允许我们突破物理画布的束缚，在网络世界中创作令人惊叹的数字杰作。让我们踏上这段创意之旅，了解如何使用 Canvas 挥洒你的艺术灵感。

HTML5 画布：数字艺术的空白画布

画布是 Canvas 的核心元素，它就像一块空白的画布，等待着你的创意和技巧来填充。你可以轻松地用 HTML 代码创建一个画布：

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

这会创建一个 500 像素宽、300 像素高的画布，你可以把它嵌入到你的网页中。

绘制的基础：使用 fillRect()

现在，是时候拿起你的数字画笔了。Canvas 提供了各种各样的绘画工具，让你可以创建各种形状、线条和图案。最基本的方法是用 fillRect() 方法。它能填充一个矩形区域，你可以通过指定矩形的起始点和宽高来控制它的尺寸和位置。例如，以下代码会创建一个红色的矩形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

填充任意形状：使用 fill()

除了矩形，你还可以用 fill() 方法填充任何形状的区域。它能填充一个路径，由一系列直线和曲线组成。你可以用 moveTo(), lineTo() 和 arc() 等方法创建路径。比如，以下代码会创建一个红色的圆形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();

描边路径：使用 stroke()

stroke() 方法可以描边路径。它能描边一个路径，你可以通过指定路径的宽度和颜色来控制描边的外观。比如，以下代码会创建一个 10 像素宽、红色的描边：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "red";
ctx.lineWidth = 10;
ctx.stroke();