在javascript畫布上旋轉單個三角形

Question

我想創建六個三角形在一起形成一個六邊形，然後旋轉它們。我成功地創建了一個切片六角形，我可以旋轉，但我希望每個切片分別行爲（例如，如果一個物體碰到一個切片，它的大小應該縮小，另一個應保持相同的大小）。以下是我的代碼在畫布上成功運行。有人可以幫助我繪製單獨的三角形，以便我可以根據需要修改它們。我打算讓三角形看起來更小或更大，使用「lineTo」來繪製它們所需的大小，然後填充它們。請讓我知道是否有另一種方法來實現這一點。非常感激。

<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

一種方法是創建一個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>