Как сделать чтобы каждый объект крутился вокруг своей оси?
У меня есть два объекта которые вращаются вокруг центральной оси, но как сделать так, чтобы они вращались вокруг своей оси как пропеллеры. При этом нужно учитывать, что они взаимосвязаны и их можно сдвинуть общей (translate) оси координат x и y?
P.S. Если объект находится в центре, то он начинает двигаться вокруг своей оси, но я их отодвинула в разные стороны на 20 используя арифметические операции "+" и "-". <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Object rotate</title> </head> <body> <script> var canvas, ctx; var x = 240, y = 240; var angle = 45; var rectW = 25; var rectH = 15; function init() { canvas = document.createElement("canvas"); ctx = canvas.getContext("2d"); canvas.width = 700; canvas.height = 700; canvas.style.background = "#444444"; document.body.appendChild(canvas); main(); } function main() { var loop = function() { update(); window.requestAnimationFrame(loop, canvas); } window.requestAnimationFrame(loop, canvas); } function update() { ctx.clearRect(0,0,canvas.width,canvas.height); angle+=5; ctx.save(); ctx.translate(x, y); ctx.rotate(dig(angle)); ctx.fillRect(-rectW/2, -(rectH/2)-20, rectW, rectH); ctx.fillRect(-rectW/2, -(rectH/2)+20, rectW, rectH); ctx.restore(); } function dig(angle) { return angle * Math.PI/180; } init(); </script> </body> </html> |
Часовой пояс GMT +3, время: 13:10. |