在微博上，我们可以左右转右转弯，这样用户就可以从不同的角度欣赏图片效果，本文将给你举一个例子，说明如何使用javaｓｃｒｉｐｔ结合相关技术来实现图像的旋转效果，我们使用HTML5的画布标签旋转图片。IE6，7和8不支持HTML5的浏览器。我们使用ie特有的滤镜效果来实现图像的旋转。

HTML



我们把一个图片在网页上的按钮，把两上方的图片，并称为旋转（）函数通过onclick事件来控制图像旋转到左和右。





往左
朝右







Javaｓｃｒｉｐｔ




功能旋转（obj，ARR）{
VaR img = document.getelementbyid（obj）；
如果（IMG | |！ARR返回false！）；
var n = img.getattribute（'step）；
如果（n = NULL）n = 0；
如果（ARR = =右）{
（n＝0）n＝3：n；
} else if（ARR = =左）{
（n＝3）n＝0：n + +；
}
img.setattribute（'step，N）；
…
}



我们写了一个自定义的函数（），其中旋转参数obj代表图像对象旋转的ID参数arr表示旋转方向，和两个值是固定的：左（向祚）右（向有）。我们设置变量n记录的顶部和底部的四个旋转状态。当我们单击旋转按钮时，我们可以保证连续旋转的状态，也就是说，每一个旋转都是在最后一次旋转操作的基础上旋转的。



然后我们需要根据浏览器的不同做不同的处理。对于IE浏览器，我们可以使用其特殊的滤镜来实现旋转效果。虽然我们不建议使用过滤器，但为了兼容IE的旧版本，我们必须重新操作这把旧刀。




功能旋转（obj，ARR）{
…
使用过滤器旋转的IE浏览器
如果（文件all）{
img.style.filter = 'progid：DXImageTransform.Microsoft.BasicImage（旋转=+n）；
要编写HTML5的现代浏览器元素旋转：画布
其他{ }
…
}
}



在代码中，我们使用document.all以确定它是否是IE浏览器。如果是这样，我们使用过滤器。对于Firefox和Chrome等现代浏览器，我们使用画布来实现旋转效果。




功能旋转（obj，ARR）{
…
要编写HTML5的现代浏览器元素旋转：画布
其他{ }
var c = document.getelementbyid（'canvas_ + obj）；
如果（c = NULL）{
img.style.visibility =隐藏；
img.style.position =绝对的；
C = document.createelement（'canvas）；
c.setattribute（身份
Img.parentNode.appendChild（C）；
}
无功canvascontext = c.getcontext（二维的）；
开关（n）{
违约:
案例0：
c.setattribute（'width，IMG。宽度）；
c.setattribute（'height，IMG。高度）；
canvascontext.rotate（0×math.pi / 180）；
canvascontext.drawimage（1mg，0, 0）；
打破；
案例1：
c.setattribute（'width，IMG。高度）；
C.setAttribute ('height', img.width);
canvascontext.rotate（90×math.pi / 180）；
canvascontext.drawimage（IMG，IMG 0，-。高度）；
打破；
案例2：
c.setattribute（'width，IMG。宽度）；
c.setattribute（'height，IMG。高度）；
canvascontext.rotate（180×math.pi / 180）；
canvascontext.drawimage（IMG，-img.width，- IMG。高度）；
打破；
案例3：
c.setattribute（'width，IMG。高度）；
c.setattribute（'height，IMG。宽度）；
canvascontext.rotate（270×math.pi / 180）；
canvascontext.drawimage（IMG，-img.width，0）；
打破；
}；
}
}



在代码中，我们创建画布元素对象，并将图片给画布对象。当变量n处于不同的状态（上下四个方向）时，我们使用画布来重建图像。



当然，有一个解决方案来绕过HTML5，实现图片的旋转效果，对于不同的浏览器，如Firefox -moz变换（旋转）下可以使用；可以使用WebKit WebKit变换（旋转）；但这不是HTML5的canvas实现良好效果好。

以上就是这篇文章和大家分享的内容，希望大家能喜欢。