Canvas多边形的画法示例

Canvas是一个在HTML中用于绘制图形的元素，本文将介绍如何使用Canvas绘制多边形。

使用路径绘制多边形

绘制多边形的关键是使用路径，通过设置路径的起始点和线条的端点，我们可以绘制出任意多边形。

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

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(150, 200);
ctx.closePath(); //闭合路径
ctx.stroke(); //绘制路径

上面的代码中首先创建了一个Canvas元素，并获取其2d上下文，然后使用beginPath()方法开始创建路径，使用moveTo()方法设置路径的起点，使用lineTo()方法连接起点和终点，最后使用closePath()方法闭合路径，并使用stroke()方法绘制路径。

使用路径绘制不规则多边形

与正常多边形不同，不规则多边形没有对称的角度和边长，因此需要更加灵活的方式绘制。

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

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(80, 150);
ctx.lineTo(20, 120);
ctx.closePath();
ctx.strokeStyle='#FF0000'; //设置线条颜色
ctx.stroke(); //绘制路径

与前面的代码类似，这里我们依然使用beginPath()方法开始创建路径，使用moveTo()方法设置路径的起点，使用lineTo()方法连接所有点，与前面的代码唯一不同的是这里的路径的点是不规则的。

创建正多边形函数

为了更加方便的使用Canvas绘制多边形，我们可以封装一个创建正多边形的函数。

function drawRegularPolygon(ctx, x, y, radius, sides, startAngle) {
  startAngle=startAngle || 0;
  let angle=2 * Math.PI / sides;
  ctx.save();
  ctx.beginPath();
  ctx.translate(x, y);
  ctx.rotate(startAngle);
  ctx.moveTo(radius, 0);
  for(let i=1; i <=sides; i++) {
    ctx.lineTo(radius * Math.cos(angle * i), radius * Math.sin(angle * i));
  }
  ctx.closePath();
  ctx.stroke();
  ctx.restore();
}

const canvas=document.getElementById('canvas');
const ctx=canvas.getContext('2d');
drawRegularPolygon(ctx, 150, 150, 100, 6); //绘制一个六边形

该函数接受5个参数，分别是Canvas的上下文对象ctx，多边形的中心坐标x、y，多边形的半径radius，多边形的边数sides，默认起始角度为0的startAngle。函数内部首先保存上下文，然后创建路径、设置路径的起点和终点，最后使用restore()方法恢复保存的上下文。

总结

通过使用Canvas的路径功能，我们可以绘制出任意形状的多边形。对于不规则的多边形，我们可以通过连接多个点来实现绘制。为了更加方便的使用Canvas绘制多边形，我们可以封装一个正多边形的函数，便于在其他地方调用。