js控制图片旋转角度

最新推荐文章于 2024-03-29 22:17:51 发布

jieseo

最新推荐文章于 2024-03-29 22:17:51 发布

阅读量829

点赞数

文章标签： 360 Microsoft

本文链接：https://blog.csdn.net/jieseo/article/details/83702298

版权

<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 οnlοad="rotateImage();">
<br />
<canvas id="canvas" width="800" height="600">
<img id="imgRotate" src="http://www.baidu.com/img/logo-yy.gif" />
</canvas>
</body>
</html>

jieseo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js控制图片旋转角度

function rotateImage() {imageToRotate = document.getElementById('imgRotate'); imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";window.s...
复制链接

扫一扫