使用動態用戶輸入在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以來的所有先前路徑將與新路徑一起重繪。