javascript结合canvas实现图片旋转效果_javascript技巧

HTML

我们在页面中放置一张图片，在图片的上方放置两个按钮，通过onclick事件调用rotate()函数来控制图片向左向右旋转。

 
   向左 
   向右 
 
 
    
 

Javascript

我们写了个自定义函数rotate（），其中参数obj表示要旋转的图片对象的id，参数arr表示旋转方向，固定两个值:left(向左)和right(向右)。我们设置变量n是为了记录上下左右四种旋转状态，点击旋转按钮时可以保证持续的旋转的状态，即每次旋转是在上次旋转操作后的基础上再次旋转。

然后，我们要根据浏览器的不同进行不同的处理，对于IE系浏览器，可以使用他们特有的滤镜来实现旋转效果，虽然我们不建议使用滤镜，但为了兼容IE老版本，我们不得不重操这把旧刀。

代码中，我们使用document.all判断是否为IE浏览器，如果是则使用滤镜，而对于firefox和chrome这样的现代浏览器，我们使用canvas来实现旋转效果。

代码中，我们创建canvas元素对象，并将图片赋予canvas对象，当变量n处于不同的状态（上下左右四个方向）时，使用canvas重新对图像进行绘制。

当然，图片的旋转效果实现还有一种解决方案，绕开html5，针对各不同的浏览器，比如firefox下面可以用-moz-transform: rotate(); webkit可以用-webkit-transform: rotate(); 但这并不如html5的canvas实现的效果好。

以上所述就是本文给大家分享的全部内容了，希望大家能够喜欢。