Question

您好我想使用基于动态用户输入的html画布创建多边形，即起始坐标和角度。这是示例代码。

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

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

多边形（上下文，50,50,50,45，-Math.PI / 2）;

专家请分享我出错的地方!!

Answer 1

只要您输入有效值，您的多边形函数就会起作用。

你的问题很可能在于获取＆amp;验证您的输入。您必须测试输入是否为有效范围内的数字。这是一个测试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中创建画布多边形

1 个答案: