Javascript 如何让画布图像每次旋转90度，而它只旋转180度

我试着让我的图像在你点击它时旋转90度，但它只旋转180度，我如何让它在你每次点击它时移动90度

在画布标签中翻转照片 画布{光标：指针；} 帆布{ 高度：50vh； } 图像文件： 使用画布的示例 此示例显示如何将照片加载到画布标记中，然后翻转

当然，如果浏览器支持画布，请单击照片进行翻转

Math.PI旋转180°。n*Math.PI/180旋转n°。因此，在您的情况下，需要调用ctx.rotateMath.PI/2

你的代码有个问题：你一直在移动旋转中心。所以当你第二次旋转时，中心已经远离原点了。现在可以平移此移动点，旋转它，然后绘制。最有可能的是，你的新形象现在已经不在画布上了

因此，您需要撤销ctx.translateimg.width-1、img.height-1；使用ctx.translate-img.width-1、-img.height-1；旋转后

有关示例，请参见此处：

例如：

// Rotation by 90° around center at 150,75
ctx.translate(150, 75);
ctx.rotate(Math.PI / 2);
ctx.translate(-150, -75);

---

这里只是猜测，但可能是ctx.rotateMath.PI/2；会吗？我试过了，但没有反应你说的“没有反应”是什么意思？图像没有更新？当我将其更改为ctx.rotateMath.PI时，它不再旋转/2可能与我更改的图像重复，但它现在不旋转了[3]can.onclick=function{console.log'here'；ctx.translate-img.width-1，-img.height-1；ctx.rotateMath.PI/2；ctx.drawImageimg，0，0，img.width，img.height；var button=document.getElementById'download'；button.setAttribute'href'，can.toDataURL'image/png'，1；}；在哪里撤消翻译？我更改了ctx.translateimg.width-1，img.height-1；与ctx.translate-img.width-1，-img.height-1；我说撤销。。。旋转之后。看我链接的例子，我把它放在后面，但它没有旋转