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

How to draw a simple Pentagon in canvas

本文关键字：一个 简单 五角大楼 绘制      更新时间：2024-03-31

我想创建一个五边形，我成功地创建了这样的五边形。

但我的五边形是不对的，因为它没有站在表面上。

我该怎么修？我需要一个优雅的答案，而不仅仅是一个快速修复。

更新：

我还想知道另一件事：

如何仅使用坐标绘制五边形，我指的是五边形的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>

有趣的问题是，您可以移动sin/cos值，使底线水平对齐：

$(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>

相关文章：