HTML5 Canvas 从入门到精通：基础系列（一）

HTML5 Canvas 是一款强有力的工具，它允许开发者在其网站上创建动态且引人入胜的图形和动画。它是一个功能强大的 API，即使是初学者也可以轻松使用，而且它还可以创建令人难以置信的复杂效果。本系列文章将引导您踏上 Canvas 之旅，从最基本的入门知识到更高级的主题。

从画布到杰作：Canvas 简介

Canvas 就像一块虚拟画布，允许您使用 JavaScript 代码直接在网页上绘制图形和动画。与传统图像不同，Canvas 图形是动态的，这意味着它们可以在用户交互或根据预定义规则实时更新。这使其成为创建交互式游戏、数据可视化和其他动态内容的理想选择。

画布的基本语法

要开始使用 Canvas，您需要在 HTML 文档中创建一个 <canvas> 元素：

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

此代码创建一个 500x300 像素的画布，其 ID 为 "myCanvas"。您可以使用此 ID 通过 JavaScript 访问画布。

要实际绘制图形，您需要获取 Canvas 的绘图上下文：

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

ctx 变量现在包含一个对象，它提供了多种方法用于在画布上绘制形状、线条和文本。

绘制基本形状

让我们从绘制基本形状开始。以下是绘制矩形的代码：

ctx.fillStyle = "blue";
ctx.fillRect(100, 100, 150, 100);

此代码创建一个填充蓝色且位于 (100, 100) 处、大小为 150x100 像素的矩形。

要绘制圆形，您可以使用 arc() 和 fill() 方法：

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

这将在 (250, 150) 处绘制一个半径为 50 像素的绿色圆形。

转换和动画

Canvas 不仅限于绘制静态图形。它还允许您转换、旋转和缩放对象，甚至创建动画。例如，以下代码将蓝色矩形向右移动 50 像素：

ctx.translate(50, 0);
ctx.fillRect(100, 100, 150, 100);

要创建动画，您可以使用 requestAnimationFrame() 函数，该函数在每一帧中调用一个指定的函数。在函数中，您可以更新图形并重新绘制画布：

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

  // 更新图形

  // 重新绘制画布
  requestAnimationFrame(animate);
}

animate();

此代码将创建一个简单的动画，该动画在画布上不断移动图形。

结语

本系列文章的第一部分为 HTML5 Canvas 的基本概念奠定了基础。通过了解基本语法、绘制基本形状以及转换和动画的基础知识，您现在已具备了在 Canvas 上创建自己的图形和动画所需的技能。在后续文章中，我们将深入探讨 Canvas 的更多高级功能，帮助您掌握这门强大的技术。