使用动态用户输入在 html5 中创建画布多边形

Posted 2023-03-16

【中文标题】使用动态用户输入在 html5 中创建画布多边形

【英文标题】：create a canvas polygon in html5 with dynamic user input

【发布时间】：2016-08-17 23:12:45

【问题描述】：

您好，我想根据动态用户输入（即起始坐标和角度）使用 html 画布创建一个多边形。这是示例代码。

     <canvas   id="myCanvas"></canvas><br /><br />
     <script>
     var canvas = document.getElementById('myCanvas');
     var context = canvas.getContext('2d'); 

      function polygon(ctx, x, y, radius, sides, startAngle, anticlockwise)     
       if (sides < 3) return;
       var a = (Math.PI * 2)/sides;
       a = anticlockwise?-a:a;
       ctx.save();
       ctx.translate(x,y);
       ctx.rotate(startAngle);
       ctx.moveTo(radius,0);
       for (var i = 1; i < sides; i++) 
       ctx.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));
       
       ctx.closePath();
       ctx.restore();

       
      var centerX = document.getElementById("cood1").value; //Starting Coordinate 1
      var centerY = document.getElementById("cood2").value; //Starting Coordinate 2
      var centerZ = document.getElementById("cood3").value; //Circle Radius
      context.beginPath();
      polygon(context,centerX,centerY,centerZ,45,-Math.PI/2);
      context.fillStyle="rgba(227,11,93,0.75)";
      context.fill();
      context.stroke();
      </script>

问题是当我使起始坐标和半径（在多边形圆的情况下）动态时代码不起作用。如果我硬编码相同的工作......

多边形(context,50,50,50,45,-Math.PI/2);

请专家分享我哪里出错了！！

【问题讨论】：

@John R....任何输入？

【参考方案1】：

只要您输入有效值，您的多边形函数就可以工作。

您的问题可能在于获取和验证您的输入。您必须测试输入是否是有效范围内的数字。这是一个测试radius 输入是否有效的示例。

// fetch the value in the #radius input element
var radius=parseInt(document.getElementById('radius').value);

// Reject any non-numbers
if(isNaN(radius))alert('Radius must be a number');return;

// Reject any numbers outside the valid range
if(radius<1)alert('Radius must be 1+');return;

这是示例代码和演示：

此示例代码仅验证“半径”，但您必须验证每个输入。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var x=150;
var y=150;
var sides=6;
var startAngle=0;
var anticlockwise=false;

document.getElementById('go').onclick=function()
    var radius=parseInt(document.getElementById('radius').value);
    if(isNaN(radius))alert('Radius must be a number');return;
    if(radius<1)alert('Radius must be 1+');return;
    polygon(ctx,x,y,radius,sides,startAngle,anticlockwise);
    ctx.stroke();
;

function polygon(ctx, x, y, radius, sides, startAngle, anticlockwise)     
     if (sides < 3) return;
     var a = (Math.PI * 2)/sides;
     a = anticlockwise?-a:a;
     ctx.save();
     ctx.translate(x,y);
     ctx.rotate(startAngle);
     ctx.beginPath();
     ctx.moveTo(radius,0);
     for (var i = 1; i < sides; i++) 
        ctx.lineTo(radius*Math.cos(a*i),radius*Math.sin(a*i));
     
     ctx.closePath();
     ctx.restore();

body background-color: ivory; 
#canvasborder:1px solid red;

Radius:&nbsp <input type=text id='radius'>
<button id=go>Draw</button>
<br>
<canvas id="canvas" width=300 height=300></canvas>

顺便说一句，您应该始终以.beginPath 开始新路径。否则，自上一个 .beginPath 以来的所有先前路径都将与新路径一起重绘。

【讨论】：

谢谢@markE...我明白你的意思了！！然而还有一个困惑......我想绘制多个几何图形。（多边形，六边形等）..因此我想控制两个参数 var side=5（在多边形的情况下）/6（在六边形的情况下);和 harcode 一样...我是 js 的新手...有没有办法可以在同一个脚本中指定相同的内容？例如：if(selected == 'Polygon') var side=5;请确认。

当然。您可以使用 Triangle、Rectangle、Pentagon 等 选项添加选择元素。然后获取选择的.value 并从.value 中设置适当的边数。请参阅此主题Q&A 以帮助您入门。干杯！