Холст - вращение моих изображений (круги)

Question

В настоящее время у меня есть куча кругов, которые я заполняю изображением внутри «ящика», они подпрыгивают и сталкиваются. Теперь я хочу, чтобы они вращаться. Я попытался заставить это работать, но я только, кажется, могу повернуть весь холст, я хочу, чтобы шары вращались.

Это мой рендер-функция:

var img = new Image; 
    img.onload = function() { 
    render(); 
    console.log("asdsad"); 
    } 

    img.src = "xxx.png"; 

    function render() { 
    var ball; 
    for (var i = 0; i <balls.length; i++) { 
    ball = balls[i]; 
    ball.x = ball.nextx; 
    ball.y = ball.nexty; 
    context.drawImage(img, ball.x - (img.width/2), ball.y - (img.height/2));  
    } 

}

ЦЕЛЬ: Получить эти шары, чтобы повернуть.

EDIT: Я пробовал что-то вроде этого, очевидно, что я делаю что-то неправильно.

 context.rotate(Math.PI/180); // Should this be another value? Either way, entire canvas rotates. 
    context.drawImage(img, ball.x - (img.width/2), ball.y - (img.height/2)); 
    //context.rotate(-Math.PI/180) 
    context.restore(); 

Answer 1

Вы почти там с вашим кодом. Вы позабыв только фактический угол:

Если вы хотите что-то легкое, чтобы обернуть вокруг головы и использовать углы в градусах вы можете сделать:

context.rotate(angle * Math.PI/180); 

трюк здесь заключается в заранее рассчитать Math.PI/180 и использовать его для расчета:

var deg2rad = Math.PI/180; 
... 
context.rotate(angle * deg2rad); 

Затем нарисуйте шарики.

Вы, наверное, уже знаете, но на всякий случай (как это не в пример вы предоставили) - Для того, чтобы использовать restore вы должны сначала использовать save:

context.save(); 
context.rotate(angle * Math.PI/180); 
context.drawImage(img, ball.x - (img.width * 0.5), ball.y - (img.height * 0.5)); 
context.restore(); 

Update:

I сделал пример с одним мячом. Просто примените принцип для многих.

ONLINE DEMO HERE

Основной цикл выглядит следующим образом:

/// pre-setup done (see demo) 

function loop() { 

    /// change direction if at some edge  
    if (x < r || x > ez.width - r) { 
     dx = -dx; 
     angleDelta = -angleDelta; /// dummy bounce 
    } 
    if (y < r || y > ez.height - r) { 
     dy = -dy; 
    } 

    /// clear previous ball 
    ctx.clearRect(x - r - 2, y - r - 2, img.width + 4, img.height + 4); 

    /// move and rotate 
    x += dx; 
    y += dy; 
    angle += angleDelta; 

    /// save context 
    ctx.save(); 

    /// move to ball's center position 
    ctx.translate(x, y); 

    /// rotate at balls center position 
    ctx.rotate(angle); 

    /// draw ball offset so center is center of image 
    ctx.drawImage(img, -r, -r); 

    /// reset translation and rotation 
    ctx.restore(); 

    ///again 
    requestAnimationFrame(loop); 
} 

Answer 2

Вы сказали, что вы испробовали:

context.rotate(Math.PI/180); 

Как известно, в математике PI = 180 градусов, и если вы PI/180 = 1 степень не будет делать ничего, кроме небольшого ,
Так что, если вы хотите, чтобы повернуть степени холст 90, вы должны написать:

context.rotate(Math.PI/2); 

если вы хотите 180 градусов, вы должны:

context.rotate(Math.PI); 

и продолжать.
с некоторыми расчетами вы сможете повернуть его в любой степени.

, если это не работает, вы можете попробовать этот вариант

эта функция принимает аргументы и Buld изображение для вас в простой способ, что вы можете понять это может помочь кому-то из своих. эта функция поможет вам

function drawImg(img, pX, pY, oX, oY, w, h, rot , context2D) { 
context2D.save(); 
context2D.translate(pX+oX, pY+oY); 
context2D.rotate(rot * Math.PI/180); 
context2D.drawImage(img, 0, 0, w, h, -(oX), -(oY), w, h); 
context2D.restore(); 
} 

Резюме:

img: the image object 
pX: the x position of the image 
pY: the y position of the image 
oX: how far across the image that the origin is 
oY: how far down the image that the origin is 
w: width of the image 
h: height of the image 
rot: angle of rotation 
context2D: the context that have been build from the canvas