x和y的画布旋转效果答案

【问题标题】：Canvas rotation effect of x and yx和y的画布旋转效果
【发布时间】：2020-09-16 02:36:56
【问题描述】：

我之前已经获得了效果，我可以让图像朝着它所面对的方向移动。但是现在当我尝试时，图像会旋转，但不会朝正确的方向移动。如何使画布中的图像朝它所面对的方向移动？

我的代码：

    ctx.save();
    ctx.translate(bulletArray[i].x, bulletArray[i].y);
    ctx.rotate(bulletArray[i].degree);
    ctx.translate(-bulletArray[i].x, -bulletArray[i].y);
    bulletArray[i].x++;
    ctx.drawImage(bullet, bulletArray[i].x, bulletArray[i].y, 10, 10);
    ctx.restore();

（这是在一个游戏循环中，所以它会重复）

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

好的。它不旋转的原因是因为旋转点需要是屏幕的中心而不是子弹。这将使子弹正确移动，而不仅仅是旋转。

【讨论】：

【解决方案2】：

如果你不想旋转，那就不要使用

ctx.rotate(bulletArray[i].degree);

在您的代码中

【讨论】：

我确实想要轮换。我想知道的是为什么子弹不向旋转方向移动。（顺便说一句）我可以在其他事情上做到这一点，所以关于这种代码安排的某些事情尤其是错误的。
然后使用sin和cos函数计算移动的直角。注意：角度不是度数，而是辐射度！
我已经想通了并且已经发布了答案。此外，度数属性被转换为弧度。