我需要一些數學題在JS

Question

朝着一個點旋轉多個圖像這裏是我的全Js Fiddle progress

function drawPetals(num){ 
for(var i=0;i<num;i++){ 
    var p = Math.random() 
    var x = bud.x + (bud.size+50) * Math.cos(2 * Math.PI * p); 
    var y = bud.y + (bud.size+50) * Math.sin(2 * Math.PI * p); 
    petals[i] = new Petal(); 
    petals[i].draw(x,y, Math.atan2(bud.x*x,bud.y*y) //Math.atan needs to change); 
} 

}

我試過Math.atan2（），但我甚至不知道那是什麼，以及它如何作品 花瓣[i] .draw（）需要3個參數x，y和旋轉，這個旋轉是我需要填寫的..，它需要指向點，但是我隨機放置在它周圍的許多花瓣。

我基本上想要花瓣面對紅點，創造一朵花。 我的小程序的目標是獲得隨機數量的花瓣，點擊一個按鈕會帶走一個，比如「他愛我，他不愛我」 - 這是女孩們做的事情。

我在數學上還不夠完善，但不要完全完成程序，我這樣做是爲了學習目的，因爲我（很明顯）是初學者。 :)

隨意教我背後的數學，我喜歡變得更聰明。

在此先感謝您的智慧;）

Answer 1

讓您的代碼編譯出現幾個問題。檢查javascript控制檯以查找任何javascript錯誤。我已經爲bud對象添加了init方法。一旦編譯完成，你就不遠了。

使用one.draw(bud.x,bud.y,120);繪製和ctx.drawImage(image, -(w/2), -h,w,h);定位的東西在正確的地方。

一個完整的工作的例子是：

var canvas = document.getElementById("c"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 500; 
canvas.height = 500; 

var TO_RADIANS = Math.PI/180; 

var bud = { 
    size:15, 
    init : function() { 
     this.x = (canvas.width-this.size)/2; 
     this.y = (canvas.height-this.size)/2; 
    }, 
    draw: function(){ 
     console.log("bud,draw",this.x,this.y,this.size); 
     drawCircle(this.x,this.y,this.size); 
    } 
} 

function Petal(){ 
    this.w = bud.size*3.5; 
    this.h = bud.size*3.5; 
    this.img = new Image(); 
    this.img.src = "http://i.imgur.com/BMeZIvV.jpg"; 
    this.draw = function(middleX,middleY,angle){ 
     drawRotatedImage(this.img,middleX,middleY,this.w,this.h,angle); 
    } 
} 

bud.init(); 
var one = new Petal(); 
one.draw(bud.x,bud.y,120); 
one.draw(bud.x,bud.y,-120); 
one.draw(bud.x,bud.y,0); 
bud.draw(); 

function drawCircle(x,y,size){ 
    ctx.fillStyle = "green"; 
    ctx.beginPath(); 
    ctx.arc(x,y,size,0,2*Math.PI); 
    ctx.fill(); 
} 

function drawRotatedImage(image, x, y, w, h, angle) { 
console.log("drawRotatedImage",x,y,w,h,angle); 
    // save the current co-ordinate system 
    // before we screw with it 
    ctx.save(); 

    // move to the middle of where we want to draw our image 
    ctx.translate(x, y); 

    // rotate around that point, converting our 
    // angle from degrees to radians 
    ctx.rotate(angle * TO_RADIANS); 

    // draw it up and to the left by half the width 
    // and height of the image 
    ctx.drawImage(image, -(w/2), -h,w,h); 

    // and restore the co-ords to how they were when we began 
    ctx.restore(); 
} 

Answer 2

我找到了！ :)

這是我需要讓每一個花瓣的臉像一朵花花蕾公式：
Math.atan2(bud.x- x, -(bud.y- y))*(180/Math.PI)

對於其他項目，這將是：

VAR旋轉= Math.atan2（ TX - X ， - （TY - Ÿ））*（180 /數學。PI）
tx,ty =您的目標x和y;
X，ÿ =要朝向目標

如在旋轉對象，

function drawPetals(num){ 
    for(var i=0;i<num;i++){ 
    var p = Math.random() 
    var x = bud.x + (bud.size+50) * Math.cos(2 * Math.PI * p); 
    var y = bud.y + (bud.size+50) * Math.sin(2 * Math.PI * p); 
    petals[i] = new Petal(); 
    //rotation parameter 
    petals[i].draw(x,y,Math.atan2(bud.x- x, -(bud.y- y))*(180/Math.PI)); 
    } 
} 

我還需要改變繪製函數繪製角度+ 180以得到相反的旋轉，

function Petal(){ 
    this.w = bud.size*3.5; 
    this.h = bud.size*3.5; 
    this.img = new Image(); 
    this.draw = function(middleX,middleY,angle){ 
    this.img.src = "http://i.imgur.com/RpYoutg.png"; 
    // +180 
    drawRotatedImage(this.img,middleX,middleY,this.w,this.h,angle+180); 
    } 
} 

這是更新的jsfiddle：https://jsfiddle.net/b90mbrkg/7/