動的ユーザー入力で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 Iハードコードが動作していないされているのと同じその作業...

ポリゴン（コンテキスト、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以降のすべての以前のパスが新しいパスと共に再描画されます。