• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

107 - 画布元素 - 2D 绘图 - 图形的填充与描边

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:21:27

前端 - HTML5 《画布元素 - 2D 绘图 - 图形的填充与描边》

引言

在前端开发中，HTML5 的 <canvas> 元素为我们提供了强大的 2D 绘图能力。通过它，我们可以创建各种复杂的图形和动画。而图形的填充与描边是绘制图形时非常基础且重要的操作，本文将详细介绍如何使用 <canvas> 进行图形的填充与描边。

画布元素基础

首先，我们需要在 HTML 中创建一个 <canvas> 元素。<canvas> 元素就像是一块空白的画布，我们可以在上面进行绘图操作。以下是一个简单的 HTML 结构：

  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 2D 绘图</title>
  8. </head>
  10. <body>
  11.     <canvas id="myCanvas" width="400" height="400"></canvas>
  12.     <script src="script.js"></script>
  13. </body>
  15. </html>

在上述代码中，我们创建了一个宽度为 400 像素，高度为 400 像素的 <canvas> 元素，并为其设置了一个唯一的 id。接下来，我们将在 JavaScript 文件（script.js）中进行绘图操作。

获取绘图上下文

在 JavaScript 中，我们需要获取 <canvas> 元素的 2D 绘图上下文，才能进行具体的绘图操作。以下是获取上下文的代码：

  1. // 获取 canvas 元素
  2. const canvas = document.getElementById('myCanvas');
  3. // 获取 2D 绘图上下文
  4. const ctx = canvas.getContext('2d');

通过 getContext('2d') 方法，我们得到了一个 2D 绘图上下文对象 ctx，后续的绘图操作都将基于这个对象进行。

图形的填充

填充图形意味着用指定的颜色或样式填满整个图形区域。我们可以使用 fillStyle 属性来设置填充的颜色或样式，然后使用 fill() 方法进行填充。

绘制填充矩形

  1. // 设置填充颜色为红色
  2. ctx.fillStyle = 'red';
  3. // 绘制一个填充矩形，参数分别为 x, y, width, height
  4. ctx.fillRect(50, 50, 200, 100);

在上述代码中，我们首先将 fillStyle 设置为红色，然后使用 fillRect() 方法绘制一个左上角坐标为 (50, 50)，宽度为 200 像素，高度为 100 像素的填充矩形。

绘制填充圆形

  1. // 设置填充颜色为蓝色
  2. ctx.fillStyle = 'blue';
  3. // 开始一个新的路径
  4. ctx.beginPath();
  5. // 绘制一个圆形，参数分别为 x, y, radius, startAngle, endAngle
  6. ctx.arc(200, 200, 50, 0, 2 * Math.PI);
  7. // 闭合路径
  8. ctx.closePath();
  9. // 填充路径
  10. ctx.fill();

这里，我们使用 arc() 方法绘制一个圆形，然后使用 fill() 方法进行填充。注意，在绘制圆形之前，需要使用 beginPath() 方法开始一个新的路径，绘制完成后使用 closePath() 方法闭合路径。

图形的描边

描边图形是指在图形的边缘绘制一条线条。我们可以使用 strokeStyle 属性来设置描边的颜色或样式，使用 lineWidth 属性来设置线条的宽度，最后使用 stroke() 方法进行描边。

绘制描边矩形

  1. // 设置描边颜色为绿色
  2. ctx.strokeStyle = 'green';
  3. // 设置线条宽度为 5 像素
  4. ctx.lineWidth = 5;
  5. // 绘制一个描边矩形
  6. ctx.strokeRect(50, 250, 200, 100);

在这段代码中，我们将 strokeStyle 设置为绿色，lineWidth 设置为 5 像素，然后使用 strokeRect() 方法绘制一个描边矩形。

绘制描边圆形

  1. // 设置描边颜色为紫色
  2. ctx.strokeStyle = 'purple';
  3. // 设置线条宽度为 3 像素
  4. ctx.lineWidth = 3;
  5. // 开始一个新的路径
  6. ctx.beginPath();
  7. // 绘制一个圆形
  8. ctx.arc(200, 350, 50, 0, 2 * Math.PI);
  9. // 闭合路径
  10. ctx.closePath();
  11. // 描边路径
  12. ctx.stroke();

同样，在绘制圆形时，需要先开始一个新的路径，绘制完成后闭合路径，最后使用 stroke() 方法进行描边。

填充与描边结合

我们还可以将填充和描边操作结合起来，为图形同时添加填充颜色和描边。

  1. // 设置填充颜色为黄色
  2. ctx.fillStyle = 'yellow';
  3. // 设置描边颜色为黑色
  4. ctx.strokeStyle = 'black';
  5. // 设置线条宽度为 2 像素
  6. ctx.lineWidth = 2;
  7. // 开始一个新的路径
  8. ctx.beginPath();
  9. // 绘制一个三角形
  10. ctx.moveTo(50, 300);
  11. ctx.lineTo(150, 200);
  12. ctx.lineTo(250, 300);
  13. ctx.closePath();
  14. // 填充路径
  15. ctx.fill();
  16. // 描边路径
  17. ctx.stroke();

在上述代码中，我们绘制了一个黄色填充、黑色描边的三角形。

总结

操作 属性/方法 描述
填充颜色 fillStyle 设置填充的颜色或样式
填充图形 fill() 用指定的填充样式填充当前路径
描边颜色 strokeStyle 设置描边的颜色或样式
线条宽度 lineWidth 设置描边线条的宽度
描边图形 stroke() 用指定的描边样式绘制当前路径

通过本文的介绍，你已经了解了如何使用 HTML5 的 <canvas> 元素进行 2D 绘图中的图形填充与描边操作。这些基础操作是创建更复杂图形和动画的基石，希望你能在实际项目中灵活运用。

以上代码可以将 HTML 文件和 JavaScript 文件保存为相应的 .html 和 .js 文件，然后在浏览器中打开 HTML 文件，即可看到绘制的图形效果。