使用动态用户输入在 html5 中创建一个 canvas 多边形

Question

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

     <canvas width="500" height="400" 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>

问题是当我制作起始坐标和半径时代码不工作（在多边形圆的情况下）dynamic.If我硬编码相同的工作...

多边形(上下文,50,50,50,45,-Math.PI/2);

请高手分享我错在哪里！！

Answer 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;}

这是示例代码和演示：

此示例代码仅验证 "radius" 但您必须验证每个输入。

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; }
#canvas{border: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 以来的所有先前路径都将与新路径一起重绘。

使用动态用户输入在 html5 中创建一个 canvas 多边形

create a canvas polygon in html5 with dynamic user input

html

javascript

canvas

polygon