How to Draw Polygons on HTML5 Canvas? - 面试题

In HTML5 Canvas, to draw a polygon, you can follow these steps:

Create the Canvas: First, add a <canvas> element to your HTML file to create a canvas.
```
html
<canvas id="myCanvas" width="500" height="500"></canvas>
```
Get the Canvas Context: In JavaScript, use the getContext() method to obtain the 2D rendering context of the canvas.
```
javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
```
Draw the Polygon: Use the beginPath() method to start a new path, then use moveTo() to move to the starting point of the polygon. Next, use lineTo() to add multiple line segments to the path, and finally use closePath() to close the path.
```
javascript
ctx.beginPath();
ctx.moveTo(x1, y1); // First vertex
ctx.lineTo(x2, y2); // Second vertex
ctx.lineTo(x3, y3); // Third vertex
// Continue adding more vertices
ctx.closePath(); // Close the path
```
Set Styles and Fill: Customize the polygon's border and fill colors by setting the strokeStyle and fillStyle properties, then use stroke() and fill() methods to stroke and fill the shape.
```
javascript
ctx.strokeStyle = 'blue'; // Border color
ctx.fillStyle = 'red'; // Fill color
ctx.stroke(); // Stroke
ctx.fill(); // Fill
```

This is the basic process for drawing a polygon on HTML5 Canvas. You can control the shape and size of the polygon by changing the coordinates in the lineTo() method.