JS 画布绘制多边形 - Javascript

在Web开发中，经常需要在页面上绘制各种图形。其中，多边形是一种常见的图形。在Javascript中，我们可以使用HTML5提供的<canvas>标签和Canvas API来绘制多边形。

canvas标签

<canvas>标签是HTML5中新增的一个标签，用于在页面上绘制各种图形。它的使用比较简单：

<canvas id="myCanvas"></canvas>

需要注意，<canvas>标签必须要有宽度和高度属性，否则无法显示任何内容：

<canvas id="myCanvas" width="500" height="500"></canvas>

Canvas API

Canvas API是HTML5中提供的一组用于绘制图形的API。使用Canvas API前，需要获取到<canvas>标签的绘图上下文。我们可以使用getContext()方法来获取到绘图上下文：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

在获取到绘图上下文后，即可使用Canvas API提供的各种方法进行绘图。下面介绍如何使用Canvas API绘制多边形。

绘制多边形

在Canvas API中，绘制多边形需要使用到以下两个方法：

• beginPath()：开始绘制路径。
• closePath()：闭合路径。

另外，绘制多边形还需要用到以下两个方法：

• moveTo()：将绘图点移到指定位置。
• lineTo()：从当前绘图点绘制一条直线到指定位置。

下面是一个绘制正五边形的例子：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(250,50);
ctx.lineTo(433,180);
ctx.lineTo(386,373);
ctx.lineTo(114,373);
ctx.lineTo(67,180);
ctx.closePath();
ctx.stroke();

上面的代码使用beginPath()开始绘制路径，使用moveTo()将绘图点移动到正五边形的第一个点的位置，然后使用lineTo()绘制从第一个点到第二个点的线段，继续使用lineTo()绘制其他的线段，最后使用closePath()闭合路径。最后使用stroke()方法绘制出多边形的线条。

总结

使用Canvas API绘制多边形需要使用到beginPath()、closePath()、moveTo()和lineTo()方法。其中，moveTo()用于将绘图点移到指定位置，lineTo()用于从当前绘图点绘制一条直线到指定位置，beginPath()用于开始绘制路径，closePath()用于闭合路径。利用这些方法，我们就可以方便地绘制各种多边形了。

参考链接

• Canvas API