如何在HTML5画布上绘制多边形？

javascript html css canvas

2022-08-30 05:37:44

我需要知道如何在画布上绘制多边形。不使用jQuery或类似的东西。

答案 1

使用和创建路径（实时演示）：moveTolineTo

var ctx = canvas.getContext('2d');
ctx.fillStyle = '#f00';
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100,50);
ctx.lineTo(50, 100);
ctx.lineTo(0, 90);
ctx.closePath();
ctx.fill();

答案 2

从 http://www.scienceprimer.com/drawing-regular-polygons-javascript-canvas：

下面的代码将绘制一个六边形。更改边数以创建不同的规则多边形。

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

// hexagon
var numberOfSides = 6,
    size = 20,
    Xcenter = 25,
    Ycenter = 25;

ctx.beginPath();
ctx.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          

for (var i = 1; i <= numberOfSides;i += 1) {
  ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}

ctx.strokeStyle = "#000000";
ctx.lineWidth = 1;
ctx.stroke();

#hexagon { border: thin dashed red; }

<canvas id="hexagon"></canvas>