javascript - 不使用 CSS3 围绕左下边缘枢轴旋转图像

Question

我想旋转图片，其工作方式类似于 tympanus's swatchbook .
但我宁愿不使用 CSS 3，因为前面的链接需要。
我宁愿在 js 上进行所有旋转，每个实例使用 JQueryRotate ，除了以 te 图像为中心的旋转点外，这很棒。

与其指出执行此操作的库，我还想学习一种很好的图像旋转方法，特别是如何在该方法中更改旋转点，以便实现色板我想要的效果。

但如果您知道一个库可以做到这一点，我也非常喜欢它。

谢谢

编辑:

在写问题时我意识到了一些事情。我可以放大那个图像的持有人。虽然不是很明亮也不优雅，或者非常好，但它是一个开始。我要检查 x3ro 提出的建议: Image rotation algorithm

html 片段:

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div id="dvImg" style="position:relative;border: 1px solid black;">
    <img src="https://www.google.com/images/srpr/logo3w.png" id="image" style="position:absolute;top:0;left:12px;margin:auto;border: 1px solid black;">
<div>

js 片段:

$("#dvImg").width($("#image").width()*2);
$("#dvImg").height($("#image").height()*2);
$("#image").css({ left: $("#image").width() + "px", top: $("#image").height()});

$("#image").mouseover(function() {
    $("#dvImg").rotate({animateTo:90});
});

Answer 1

如果你想自己做旋转，看看这个问题:Image rotation algorithm .当然，它不是特定于 JavaScript 的解释，但它应该或多或少可以很容易地转换为基于 Canvas 的解决方案。我没有查看 jQueryRotate 实现，但它可能也值得研究。

也就是说，可能没有关于“如何使用左下角的轴心点旋转图像”的 JavaScript 特定教程:D

---

正如@Jasper 所指出的，虽然 canvas 本身在 IE9 之前的 IE 版本中不受支持，但有一些方法和方法可以获取(大部分) Canvas API 甚至在早期版本中，如 ExplorerCanvas演示。