Javascript 如何在画布上绘制简单的五角大楼

我想创建一个五角大楼，我成功地创建了这样一个五角大楼

但是我的五角大楼是不对的，因为它不在表面上

我怎样才能修好它？我需要一个优雅的答案，而不仅仅是一个快速解决方案

更新： 我还想知道另一件事：

我怎么能只用坐标画五角大楼，我是说五角大楼的5个坐标

我想画一个基于五个已知坐标系（v1，v2..v5）的五角大楼 没有任何循环，在五个点之间画出某种路径

$（函数（）{
var canvas=document.getElementById（“canvas”）；
var cxt=canvas.getContext（“2d”）；
//六边形
var numberOfSides=5，
尺寸=100，
Xcenter=150，
中心=150；
cxt.beginPath（）；
cxt.moveTo（Xcenter+size*Math.cos（0），Ycenter+size*Math.sin（0））；
对于（var i=1；i有趣的问题，您可以移动sin/cos值，以便底线水平对齐：


$（函数（）{
var canvas=document.getElementById（“canvas”）；
var cxt=canvas.getContext（“2d”）；
//六边形
var numberOfSides=5，
尺寸=100，
Xcenter=150，
中心=150，
步长=2*Math.PI/numberOfSides，//预先计算步长值
shift=（Math.PI/180.0）*-18；//快速修复；）
cxt.beginPath（）；
//cxt.moveTo（Xcenter+size*Math.cos（0），Ycenter+size*Math.sin（0））；
对于（var i=0；i thx）快速修复，但我有另一个问题，我能否仅使用五个点绘制五角大楼并在它们之间绘制路径。我的意思是，我有五个已知点的坐标，就像我绘制三角形时一样。