我想创建一个五边形，我成功地创建了这样的五边形。
但我的五边形不正确，因为它不在表面上。
我该如何修复它？我需要一个优雅的答案而不仅仅是一个快速解决.
Update:
我还想知道另一件事：
如何仅使用坐标（我的意思是五边形的 5 个坐标）绘制五边形？
我想根据五个已知坐标（v1，v2..v5）绘制一个五边形
并且没有任何循环，在五点之间绘制某种路径。
$(function(){
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
// hexagon
var numberOfSides = 5,
size = 100,
Xcenter = 150,
Ycenter = 150;
cxt.beginPath();
cxt.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));
for (var i = 1; i <= numberOfSides;i += 1) {
cxt.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
cxt.strokeStyle = "#000000";
cxt.lineWidth = 1;
cxt.stroke();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=650 height=500></canvas>
有趣的问题，您可以移动正弦/余弦值，使底线水平对齐：
$(function(){
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
// hexagon
var numberOfSides = 5,
size = 100,
Xcenter = 150,
Ycenter = 150,
step = 2 * Math.PI / numberOfSides,//Precalculate step value
shift = (Math.PI / 180.0) * -18;//Quick fix ;)
cxt.beginPath();
//cxt.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));
for (var i = 0; i <= numberOfSides;i++) {
var curStep = i * step + shift;
cxt.lineTo (Xcenter + size * Math.cos(curStep), Ycenter + size * Math.sin(curStep));
}
cxt.strokeStyle = "#000000";
cxt.lineWidth = 1;
cxt.stroke();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=650 height=500></canvas>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
