如何使用 HTML5 Canvas 为轨道上的物体设置动画？

Question

假设我已经画好了所有的物体，中间有一个太阳，还有几个圆圈代表行星。有人能告诉我如何让这些物体以圆形方式移动吗？我不需要任何重力等，但我想这可能是一个甜蜜的奖励！

谢谢 ：）

Answer 1

这是一个粗略的解决方案：

var canvas = document.getElementById('scene');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;

var circle = function(color, r) {
    ctx.fillStyle = color;

    ctx.beginPath();
    ctx.arc(0, 0, r, 0, 2 * Math.PI, true);
    ctx.closePath();

    ctx.fill();
}

var i = 0;
var redraw = function() {
    ctx.save();

    // paint bg
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, w, h);

    // set origin to center
    ctx.translate(w / 2, h / 2);

    // draw sun
    circle('yellow', 20);

    // rotate + move along x
    ctx.rotate(i / 100);
    ctx.translate(100, 0);

    // draw planet
    circle('green', 10);

    ctx.restore();

    i++;

    window.requestAnimationFrame(redraw);
};

window.requestAnimationFrame(redraw);

您可以在此处找到演示。根据需要进行扩展。 :)

Answer 2

为了旋转空间中的点（本例中的点是行星的位置），您需要将该点的坐标与二维变换矩阵相乘，幸运的是，您不需要担心学习如何构建这个矩阵或者如何将点与矩阵相乘。 html5 canvas 上下文有一个 rotate() 方法，它将在调用此函数后绘制的每个点上为您执行此操作。 rotate()方法允许传入一个unic参数，即旋转的角度，但是这个角度需要转换成弧度。要将角度 X 转换为弧度，请执行以下操作：

var X = 10; // 10 degrees
var X_Radians = Math.PI / 180 * X;

// Now you pass this angle to the rotate method
context.rotate(X_Radians);

好的，现在您知道如何旋转画布中的点，只是不要忘记执行保存和恢复操作，以免影响场景中的其他对象。

现在你想要的是围绕另一个点（太阳）旋转一个点，当你在画布上旋转某些东西时，如果你的太阳不在（0,0）点，它会围绕（0,0）点旋转位置，然后您需要平移（移动）要旋转的点，使太阳的位置位于 (0,0) 位置。为此，您只需从旋转点的位置中减去太阳的位置即可。然后应用旋转，然后通过添加之前从中减去的太阳位置，将您的点平移（移动）回其原始位置。

要翻译您的观点，您将使用画布上下文的 translate() 方法，所以我们开始（只是不要介意我的行星和太阳是直角）：

var Planet_Position = {X: 400, Y: 250};
var Sun_Position = {X: 250, Y: 250};

// First, let's draw our sun and our planet
context.fillStyle = "#ffff00";
context.fillRect(Sun_Position.X, Sun_Position.Y, 10, 10);

context.fillStyle = "#0000ff";
context.fillRect(Planet_Position.X, Planet_Position.Y, 10, 10);

// Ok, so now we are going to rotate our planet around the sun and draw it again

context.save();
context.translate(Sun_Position.X, Sun_Position.Y);
context.rotate(-Math.PI / 180 * 10);
context.translate(-Sun_Position.X, -Sun_Position.Y);

context.fillRect(Planet_Position.X, Planet_Position.Y, 10, 10);

context.restore();

好的，您可能已经注意到了尴尬的事情：我说你需要先从行星位置中减去太阳位置，然后在旋转后添加它，但在上面的代码中，我显然先添加了太阳位置，然后再进行减法，但这只是因为顺序下进行的矩阵乘法引擎盖，使其反转...

不，我希望我说得很清楚，但是几何变换确实是一个很大的主题，需要在如此简短的答案中解释...