只绘制 closePath() 线

Question

所以我正在尝试使用 arc 函数绘制多边形。我知道有更好的方法来绘制多边形，但稍后我将使用此功能绘制点。

我绘制的形状没有问题，但是，弧形路径是可见的，所以我想知道是否有一种简单的方法可以将其从路径中删除。我已经尝试了一些东西，但我没有在网上找到任何东西。

做不到这一点，是否有一种方法可以在绘制圆弧之前存储当前位置并使用该位置从端点创建线？

start = 0;
inc = 360 / sides;

con.strokeStyle = 'rgb(73, 150, 210)';
con.lineWidth = 8;

for(i = 1; i <= sides; i++){
  end = inc * i;
  con.beginPath();
  con.arc(500, 500, 500, toRadians(start), toRadians(end));
  con.closePath();
  con.stroke();
  start = end;
}

编辑：有人推荐了另一个关于透明度的 post，我在那个 post 中没有看到任何关于将 closePath 与实际路径本身分开的内容。也许我错过了什么，因为 post 相当长。

Answer 1

这种修改后的方法怎么样？

const con = canvas.getContext("2d");
const sides = 10;

con.strokeStyle = 'rgb(73, 150, 210)';
con.lineWidth = 1;

con.beginPath();

// for loop from i=0 to i = sides+1
// j is the angle we are currently at
// use sin & cos aggregate methods to get the positions on 2d grid
for (let i = 0, j=2 * Math.PI / sides; i <= sides+1; i++, j = i * 2 * Math.PI / sides)
  con.lineTo(50 + 50 * Math.cos(j), 50 + 50 * Math.sin(j));
con.stroke();

<canvas id="canvas" width="100px" height="100px"></canvas>

只绘制 closePath() 线

Only draw closePath() line

html

javascript

php

canvas