JavaScriptのキャンバスで個々の三角形を回転する

Question

6つの三角形を一緒に作成して六角形を作成し、回転させようとしています。私は正常にスライスされた六角形を作成し、私はそれを回転させることができますが、私は別々に動作するように各スライスを（たとえば、オブジェクトがスライスを打つ、それはサイズが縮小する必要があります。私のコードは、キャンバス上で正常に実行されています。他の三角形を別々の参照で描画して、必要に応じて修正できるように助けてください。私は三角形を小さくしたり大きくしたりして、必要な大きさの線を描画して塗りつぶすことを計画しています。これを達成するための別のアプローチがあるかどうかを教えてください。とても有難い。

<script> 
var numberOfSides = 6, 
size = 100, 
Xcenter = 0, 
Ycenter = 0, 
prevX, 
prevY, 
startPX, 
startPY, 
angle = 0.1, 
angleChange=Math.PI/180; 

ctx.beginPath(); 
ctx.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));   
startPX = Xcenter + size * Math.cos(0); 
startPY = Ycenter + size * Math.sin(0); 

requestAnimationFrame(animate); 

function animate(time){ 
requestAnimationFrame(animate); 
ctx.clearRect(0,0,canvas.width,canvas.height); 
ctx.save(); 

// translate and rotate the canvas 
ctx.translate(canvas.width/2,canvas.height/2); 
ctx.rotate(angle); 
for (var i = 1; i <= numberOfSides;i += 1) { 
ctx.fillStyle = 'blue'; 
// ctx.fillStyle = get_random_color(); 
// addMessage(get_random_color()); 
// save the untranslated & unrotated context state 



ctx.lineTo(Xcenter,Ycenter); 
ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides)); 
ctx.lineTo (startPX, startPY); 
ctx.closePath(); 
ctx.fill(); 
// prevX = Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides); 
// prevY = Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides); 
startPX = Xcenter + size * Math.cos(i * 2 * Math.PI/numberOfSides); 
startPY = Ycenter + size * Math.sin(i * 2 * Math.PI/numberOfSides); 
ctx.moveTo(startPX,startPY); 
ctx.beginPath(); 
} 

// restore the context to its untranslated & unrotated state 
ctx.restore();  
angle+=angleChange; 


} 
ctx.closePath(); 
ctx.strokeStyle = "#ffffff"; 
ctx.lineWidth = 1; 
ctx.stroke(); 
//} 
</script> 

Answer 1

1つの方法は、Sliceクラスを作成し、このクラスにペイント関数を移動することです。各スライスに対して、個別にスタイルを設定できるSliceオブジェクト/インスタンス（new Slice(...)）を作成します（slices[0].setColor('red')）。下のスニペットを参照してください。

以下のサンプルを改善するには、同じ座標のスライスを作成し、スライスを正しい位置に回転させることをお勧めします（ctx.rotate）。

var Slice = function(Xcenter, Ycenter, size, number, numberOfSides) { 
 
     this.scale = 1.0; 
 
     this.color = 'blue'; 
 
     this.pos = []; 
 
     this.pos.push({x:Xcenter, y:Ycenter}); 
 
     this.pos.push({ 
 
      x:Xcenter + size * Math.cos((number+1) * 2 * Math.PI/numberOfSides), 
 
      y:Ycenter + size * Math.sin((number+1) * 2 * Math.PI/numberOfSides) 
 
     }); 
 
     this.pos.push({ 
 
      x: Xcenter + size * Math.cos(number * 2 * Math.PI/numberOfSides), 
 
      y: Ycenter + size * Math.sin(number * 2 * Math.PI/numberOfSides) 
 
     }); 
 
    }; 
 
    Slice.prototype.setScale = function(scale) { 
 
     this.scale = scale; 
 
    }; 
 
    Slice.prototype.setColor = function(color) { 
 
     this.color = color; 
 
    }; 
 
    Slice.prototype.draw = function(ctx) { 
 
     ctx.save(); 
 
     ctx.scale(this.scale,this.scale); 
 
     ctx.beginPath(); 
 
     for (var i=0; i<this.pos.length; i++) { 
 
      ctx.lineTo(this.pos[i].x, this.pos[i].y); 
 
     } 
 
     ctx.closePath(); 
 
     ctx.fillStyle = this.color; 
 
     ctx.fill(); 
 
     ctx.stroke(); 
 
     ctx.restore(); 
 
    }; 
 

 
    function ready() { 
 

 
     var canvas=document.getElementById("myCanvas"); 
 
     var ctx=canvas.getContext("2d"); 
 

 
     var numberOfSides = 6, 
 
     size = 100, 
 
     Xcenter = 0, 
 
     Ycenter = 0, 
 
     prevX, 
 
     prevY, 
 
     startPX, 
 
     startPY, 
 
     angle = 0.1, 
 
     angleChange=Math.PI/180; 
 

 
     var slices = []; 
 
     for (var i = 1; i <= numberOfSides;i += 1) { 
 
      slices.push(new Slice(Xcenter, Ycenter, size, i, numberOfSides)); 
 
     } 
 
     slices[0].setScale(0.9); 
 
     slices[0].setColor('red'); 
 

 
     requestAnimationFrame(animate); 
 

 
     function animate(time){ 
 
      requestAnimationFrame(animate); 
 
      ctx.clearRect(0,0,canvas.width,canvas.height); 
 
      ctx.save(); 
 

 
      // translate and rotate the canvas 
 
      ctx.translate(canvas.width/2,canvas.height/2); 
 
      ctx.rotate(angle); 
 
      for (var i = 1; i <= numberOfSides;i += 1) { 
 
       slices[i-1].draw(ctx); 
 
      } 
 

 
      // restore the context to its untranslated & unrotated state 
 
      ctx.restore(); 
 
      angle+=angleChange; 
 
     } 
 
     ctx.closePath(); 
 
     ctx.strokeStyle = "#ffffff"; 
 
     ctx.lineWidth = 1; 
 
     ctx.stroke(); 
 
    }

<body onload="ready();"> 
 
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas> 
 
</body>