• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

105 - 画布元素 - 2D 绘图 - 绘制线条图形

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:20:16

画布元素 - 2D 绘图 - 绘制线条图形

在前端开发中，HTML5 的 <canvas> 元素为我们提供了强大的绘图功能。通过它，我们可以在网页上动态地绘制各种图形，其中绘制线条图形是基础且实用的操作。本文将详细介绍如何使用 <canvas> 元素进行 2D 绘图来绘制线条图形。

1. <canvas> 元素简介

<canvas> 是 HTML5 新增的元素，用于在网页上绘制图形。它就像是一块画布，我们可以使用 JavaScript 在上面进行各种绘图操作。基本的 <canvas> 元素代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Example</title>
  8. </head>
  10. <body>
  11.     <canvas id="myCanvas" width="400" height="300"></canvas>
  12.     <script>
  13.         // 获取 canvas 元素
  14.         const canvas = document.getElementById('myCanvas');
  15.         // 获取 2D 绘图上下文
  16.         const ctx = canvas.getContext('2d');
  17.     </script>
  18. </body>
  20. </html>

在上述代码中，我们首先创建了一个 <canvas> 元素，并为其设置了 id、width 和 height 属性。然后，通过 document.getElementById 方法获取该元素，再使用 getContext('2d') 方法获取 2D 绘图上下文 ctx，后续的绘图操作都将基于这个上下文进行。

2. 绘制直线

绘制直线是最基本的线条图形绘制操作。使用 beginPath() 方法开始一个新的路径，moveTo() 方法设置起点，lineTo() 方法设置终点，最后使用 stroke() 方法绘制线条。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Draw Line</title>
  8. </head>
  10. <body>
  11.     <canvas id="lineCanvas" width="400" height="300"></canvas>
  12.     <script>
  13.         const canvas = document.getElementById('lineCanvas');
  14.         const ctx = canvas.getContext('2d');
  16.         // 开始新路径
  17.         ctx.beginPath();
  18.         // 设置起点
  19.         ctx.moveTo(50, 50);
  20.         // 设置终点
  21.         ctx.lineTo(350, 50);
  22.         // 绘制线条
  23.         ctx.stroke();
  24.     </script>
  25. </body>
  27. </html>

在这个例子中，我们从坐标 (50, 50) 开始，绘制一条到坐标 (350, 50) 的水平直线。

3. 绘制折线

绘制折线就是连续调用 lineTo() 方法来连接多个点。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Draw Polyline</title>
  8. </head>
  10. <body>
  11.     <canvas id="polylineCanvas" width="400" height="300"></canvas>
  12.     <script>
  13.         const canvas = document.getElementById('polylineCanvas');
  14.         const ctx = canvas.getContext('2d');
  16.         ctx.beginPath();
  17.         ctx.moveTo(50, 50);
  18.         ctx.lineTo(150, 200);
  19.         ctx.lineTo(250, 100);
  20.         ctx.lineTo(350, 200);
  21.         ctx.stroke();
  22.     </script>
  23. </body>
  25. </html>

在上述代码中，我们通过多次调用 lineTo() 方法，绘制了一条由多个线段组成的折线。

4. 绘制矩形

绘制矩形有两种方法：使用 strokeRect() 方法绘制矩形边框，使用 fillRect() 方法绘制填充矩形。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Draw Rectangle</title>
  8. </head>
  10. <body>
  11.     <canvas id="rectCanvas" width="400" height="300"></canvas>
  12.     <script>
  13.         const canvas = document.getElementById('rectCanvas');
  14.         const ctx = canvas.getContext('2d');
  16.         // 绘制矩形边框
  17.         ctx.strokeRect(50, 50, 200, 150);
  19.         // 绘制填充矩形
  20.         ctx.fillStyle = 'blue';
  21.         ctx.fillRect(260, 50, 100, 150);
  22.     </script>
  23. </body>
  25. </html>

在这个例子中，strokeRect(x, y, width, height) 方法用于绘制一个左上角坐标为 (x, y)，宽度为 width，高度为 height 的矩形边框。fillRect() 方法同理，只是绘制的是填充矩形，通过 fillStyle 属性可以设置填充颜色。

5. 总结

绘图操作 方法 说明
开始新路径 beginPath() 开始一个新的绘图路径
设置起点 moveTo(x, y) 将绘图起点移动到坐标 (x, y)
绘制直线 lineTo(x, y) 从当前点绘制一条到坐标 (x, y) 的直线
绘制线条 stroke() 绘制当前路径的线条
绘制矩形边框 strokeRect(x, y, width, height) 绘制一个左上角坐标为 (x, y)，宽度为 width，高度为 height 的矩形边框
绘制填充矩形 fillRect(x, y, width, height) 绘制一个左上角坐标为 (x, y)，宽度为 width，高度为 height 的填充矩形

通过以上介绍，我们可以看到使用 HTML5 的 <canvas> 元素进行 2D 绘图来绘制线条图形是非常简单和灵活的。掌握这些基本的绘图操作，我们就可以在网页上创建出各种有趣的图形和动画效果。