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

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> 

的问题是，当我提出的起始坐标和半径（以多边形圆的情况下）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;} 

这里的示例代码和演示：

此示例代码只是验证“半径”，但你必须确认每个输入。

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以来的所有先前路径将与新路径一起重绘。