前端

服务端

计算机基础

HTML5 <canvas> 元素是一个可以使用脚本（通常是JavaScript）来绘制图形和动画的HTML元素。它是HTML5规范的一部分，旨在提供一个丰富的图形绘制接口，允许开发者绘制2D图形，从简单的图形和文本到复杂的动画和游戏场景。

Canvas

在HTML5 Canvas上绘制多边形，您可以遵循以下步骤：

1. **创建画布**：
   首先，在HTML文件中添加一个`<canvas>`元素来创建一个画布。
   ```html
   <canvas id="myCanvas" width="500" height="500"></canvas>
   ```

2. **获取画布上下文**：
   在JavaScript中，使用`getContext()`方法获取画布的2D渲染上下文。
   ```javascript
   var canvas = document.getElementById("myCanvas");
   var ctx = canvas.getContext("2d");
   ```

3. **绘制多边形**：
   使用`beginPath()`方法开始一个新的路径，然后使用`moveTo()`将画笔移动到多边形的起始点。接着使用`lineTo()`方法添加多个线段，最后用`closePath()`闭合路径。
   ```javascript
   ctx.beginPath();
   ctx.moveTo(x1, y1); // 第一个顶点
   ctx.lineTo(x2, y2); // 第二个顶点
   ctx.lineTo(x3, y3); // 第三个顶点
   // 继续添加更多顶点
   ctx.closePath(); // 闭合路径
   ```

4. **设置样式和填充**：
   可以通过设置`strokeStyle`和`fillStyle`属性来自定义多边形的边框和填充颜色，然后使用`stroke()`和`fill()`方法对形状进行描边和填充。
   ```javascript
   ctx.strokeStyle = 'blue'; // 边框颜色
   ctx.fillStyle = 'red'; // 填充颜色
   ctx.stroke(); // 描边
   ctx.fill(); // 填充
   ```

以上就是在HTML5 Canvas上绘制一个多边形的基本步骤。您可以通过改变`lineTo()`方法中的坐标点来控制多边形的形状和大小。

Canvas面试题手册

如何在HTML5 Canvas上绘制多边形？