js统制图片旋转角度
日期：2014-05-16 浏览次数：20401 次
js控制图片旋转角度
<html>
<head>
<title></title>
<script type="text/javascript">
function rotateImage() {
imageToRotate = document.getElementById('imgRotate');
imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
window.setTimeout("rotate()",100);
}
var imageToRotate;
var degreeToRotate=0;
function rotate(){
var deg2radians = Math.PI * 2 / 360;
degreeToRotate++;
degreeToRotate=degreeToRotate%360;
rad = degreeToRotate * deg2radians ;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
imageToRotate.filters.item(0).M11 = costheta;
imageToRotate.filters.item(0).M12 = -sintheta;
imageToRotate.filters.item(0).M21 = sintheta;
imageToRotate.filters.item(0).M22 = costheta;
window.setTimeout("rotate()",100);
}
</script>
</head>
<body onload="rotateImage();">
<br />
<canvas id="canvas" width="800" height="600">
<img id="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />
</canvas>
</body>
</html>
<html>
<head>
<title></title>
<script type="text/javascript">
function rotateImage() {
imageToRotate = document.getElementById('imgRotate');
imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
window.setTimeout("rotate()",100);
}
var imageToRotate;
var degreeToRotate=0;
function rotate(){
var deg2radians = Math.PI * 2 / 360;
degreeToRotate++;
degreeToRotate=degreeToRotate%360;
rad = degreeToRotate * deg2radians ;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
imageToRotate.filters.item(0).M11 = costheta;
imageToRotate.filters.item(0).M12 = -sintheta;
imageToRotate.filters.item(0).M21 = sintheta;
imageToRotate.filters.item(0).M22 = costheta;
window.setTimeout("rotate()",100);
}
</script>
</head>
<body onload="rotateImage();">
<br />
<canvas id="canvas" width="800" height="600">
<img id="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />
</canvas>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
