javascript - 我需要一些数学帮助，将多个图像旋转到 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() 但我什至不知道它的作用和工作原理petals[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(); 
}