使用Javascript旋转图像 [英] Rotate an image using Javascript

问题描述

首先，我目前正在使用JQuery，因此JQuery解决方案可行。

First off, I am currently using JQuery so JQuery solutions viable.

我想通过a旋转图像动态X度，每秒计算一次。

I want to rotate an image by a dynamic X degrees which is calculated every sec.

现在我使用这个 JqueryRotate插件

图像每秒都完美旋转。但是我现在正在尝试一些更复杂的东西。

The image is rotated perfectly every sec. But I am trying something a little more complicated now.

我想在彼此之上旋转4个透明图像。目前我有四个< img> 标签都正确对齐并且看起来很漂亮^ _ ^但是使用前面提到的JqueryRotate插件会强制重绘图像以进行旋转它失去了透明度，因此只显示最顶层的图像，这显然不起作用。

I want to rotate 4 transparent images on top of each other. Currently I have four <img> tags all correctly aligned and looking nice and pretty ^_^ but using the JqueryRotate plugin that I mentioned earlier forces a redrawing of the image to rotate it losing the transparency so only the top most image is displayed which obviously isn't going to work.

那么，什么是好的库/插件或方式旋转图像同时保持透明度？*

必须适用于Opera，Safari，Chrome，Firefox和IE8 +

Must work in Opera, Safari, Chrome, Firefox and IE8+

我希望不必为此包含另一个库，但如果需要，我将这样做以创建旋转4个图像的效果。在此先感谢。

I am hoping not to have to include another library for this but if need be I will do so to create this effect of rotating the 4 images. Thanks in advance.

推荐答案

你可以看一下使用Canvas。 IE 8没有原生支持，但有一个插件： http ：//ajaxian.com/archives/explorer-canvas-updated-for-ie-8-and-more 。

You could look at using Canvas. No native support from IE 8 but there is a plugin: http://ajaxian.com/archives/explorer-canvas-updated-for-ie-8-and-more.

如果你愿意住有了插件要求，Canvas应该让你的工作变得轻松。

If you were willing to live with the plugin requirement, Canvas should make your job easy.

这篇关于使用Javascript旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！