HTML 图形绘制

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") html/MultimediaandGraphicsGroup -.-> html/embed_media("`Embedding External Media`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70719{{"`HTML 图形绘制`"}} html/head_elems -.-> lab-70719{{"`HTML 图形绘制`"}} html/layout -.-> lab-70719{{"`HTML 图形绘制`"}} html/doc_flow -.-> lab-70719{{"`HTML 图形绘制`"}} html/multimedia -.-> lab-70719{{"`HTML 图形绘制`"}} html/embed_media -.-> lab-70719{{"`HTML 图形绘制`"}} html/inter_elems -.-> lab-70719{{"`HTML 图形绘制`"}} end

创建一个简单的 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 绘图上下文。接着,我们声明了一些变量 xy 来保存矩形的位置,并声明了 dx 变量来控制矩形沿 x 轴的移动。

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

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

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

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

总结

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

您可能感兴趣的其他 HTML 教程