掌握 HTML Canvas 图形绘制

介绍

HTML <canvas> 标签用于在网页上绘制图形和其他视觉元素。该标签为开发者提供了一个平台，可以使用 JavaScript 创建游戏、图像和动画。<canvas> 元素带有多种属性，允许你操作画布的大小、不透明度和外观。

在本实验中，我们将探索如何在 HTML 中使用 <canvas> 标签来创建图形、添加动画，并使用 JavaScript 操作形状和文本。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

创建一个简单的 Canvas

让我们通过使用 <canvas> 标签创建一个简单的画布，但不添加任何内容。在 index.html 文件中，编写以下代码：

<!doctype html>
<html>
  <head>
    <title>Simple Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>

保存文件并在浏览器中打开它。你会注意到页面上有一个空白区域，这就是我们的画布，其默认宽度为 300px，高度为 150px。

为 Canvas 添加样式

我们可以使用 style 属性为画布添加样式。让我们为画布添加边框，使其边界可见。

<!doctype html>
<html>
  <head>
    <title>Styled Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
  </body>
</html>

保存文件并刷新浏览器以查看结果。

在 Canvas 上创建形状

现在让我们在画布上添加一些图形。为此，我们需要使用 JavaScript。我们可以使用 getContext() 方法获取画布的 2D 绘图上下文，并对其进行各种操作。

<!doctype html>
<html>
  <head>
    <title>Shapes on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Draw a rectangle
      ctx.fillStyle = "red";
      ctx.fillRect(50, 50, 100, 50);
    </script>
  </body>
</html>

在上面的代码中，我们首先通过 ID myCanvas 获取画布元素，然后使用 getContext() 获取 2D 绘图上下文。接着，我们将 fillStyle 属性设置为 "red"，以便用红色填充矩形。最后，我们使用 fillRect() 方法绘制矩形。

保存文件并刷新浏览器以查看结果。

在 Canvas 上添加文本

让我们使用 JavaScript 在画布上添加一些文本。

<!doctype html>
<html>
  <head>
    <title>Text on Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      // Add text
      ctx.font = "30px Arial";
      ctx.fillStyle = "blue";
      ctx.fillText("Hello World", 50, 100);
    </script>
  </body>
</html>

在上面的代码中，我们首先通过 ID myCanvas 获取画布元素，然后使用 getContext() 获取 2D 绘图上下文。接着，我们将 font 属性设置为 "30px Arial"，并将 fillStyle 属性设置为 "blue"。最后，我们使用 fillText() 方法添加文本 "Hello World"。

保存文件并刷新浏览器以查看结果。

在 Canvas 上实现图形动画

我们还可以使用 JavaScript 和 HTML <canvas> 标签在画布上创建动画。让我们在画布上创建一个移动矩形的动画。

<!doctype html>
<html>
  <head>
    <title>Animated Canvas</title>
  </head>

  <body>
    <canvas id="myCanvas" style="border: 1px solid black;"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");

      let x = 20;
      let y = 20;
      const dx = 5;

      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.fillRect(x, y, 50, 50);

        if (x + 50 > canvas.width || x < 0) {
          dx = -dx;
        }

        x += dx;
      }

      animate();
    </script>
  </body>
</html>

在上面的代码中，我们首先通过 ID myCanvas 获取画布元素，然后使用 getContext() 获取 2D 绘图上下文。接着，我们声明了一些变量 x 和 y 来保存矩形的位置，并声明了 dx 变量来控制矩形沿 x 轴的移动。

然后，我们创建了一个 animate() 函数来在屏幕上绘制矩形。我们使用 clearRect() 方法在每一帧清除画布上的先前绘制内容，然后使用 fillRect() 方法用红色填充矩形。

接着，我们检查矩形是否到达了画布的边界，如果是，则通过改变 dx 的值来改变移动方向。

最后，我们调用 requestAnimationFrame() 方法来创建动画循环。

保存文件并刷新浏览器以查看动画矩形。

总结

在本实验中，我们学习了如何使用 HTML <canvas> 标签在网页上创建图形和动画。我们还学习了如何通过属性和样式来操作画布的大小、透明度和外观。通过使用 JavaScript 和 getContext() 方法，我们在画布上添加了形状、文本和动画。

HTML 图形绘制

介绍

创建一个简单的 Canvas

为 Canvas 添加样式

在 Canvas 上创建形状

在 Canvas 上添加文本

在 Canvas 上实现图形动画

总结