У меня есть два объекта которые вращаются вокруг центральной оси, но как сделать так, чтобы они вращались вокруг своей оси как пропеллеры. При этом нужно учитывать, что они взаимосвязаны и их можно сдвинуть общей (
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>
