网页中实现图片旋转的几种实现方式

发布时间：2018-10-04 04:10:45 所属栏目：运营来源：站长网

导读：网页中图片旋转一般有下面三种常见的实现方式：一、 ie 滤镜 IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度

使用canvas 2d绘图上下文对象的context.rotate(angle)方法，通过指定需要旋转的弧度旋转坐标轴来实现图片的旋转，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点时画布的左上角。角度转换弧度的公式为：弧度 = 角度 * Math.PI / 180。

浏览器支持：Chrome 1.0+、Firefox 1.5+、Opera 9.0+、Safari 1.3+ 、IE 9+

JS代码：

Copy to Clipboard Liehuo.Net Codes

引用的内容：[www.veryhuo.com] context = canvas.getContext("2d")
context.rotate(90 * Math.PI / 180);
context.drawImage(img, 0, -img.height);

坐标旋转示意图：

网页中实现图片旋转的几种实现方式

HTML5 canvas rotate旋转演示：

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>HTML5 canvas rotate</title> </head> <body> <a href="http://www.veryhuo.com/">HTML5秘籍/图灵程序设计丛书</a><img src="http://www.veryhuo.com/uploads/common/images/wall1.jpg" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br> <script> (function(){ var canvas = document.createElement("canvas"); canvas.style = "border:1px solid #ccc" var context = canvas.getContext("2d"); var img = new Image(); if(context == null){ return; } img.src="http://www.veryhuo.com/uploads/common/images/wall1.jpg"; img.onload = function(){ var length = Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2));//计算画布大小，取图形的对角线，否则旋转时可能隐藏掉部分内容 canvas.width = length; canvas.height = length; //context.strokeRect(0, 0, length, length); context.translate(canvas.width/2, canvas.height/2);//平移坐标原点到画布中心 //context.rotate(30 * Math.PI / 180); context.drawImage(this, (-this.width / 2), ( -this.height / 2 )); timer = setInterval(rotate, 50); } var r = 0; var i = 1; function rotate(){ r += i; if( Math.abs(r) >= 25 ) i*=-1;//左右摆动25度 context.save();//保存坐标抽状态 context.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height); context.rotate(r * Math.PI / 180); context.drawImage(img, (-img.width / 2), ( -img.height / 2 )); //把图片填充到画布中心 context.restore() //还原坐标抽状态 }; //最火软件站 veryhuo.com //绑定事件 canvas.onmouseover = function(){ clearInterval(timer); timer = null; }; canvas.onclick = function(){ location.href= "http://www.veryhuo.com"; }; canvas.onmouseout = function(){ if(timer)return; timer = setInterval(rotate,50); }; document.body.appendChild(canvas); }()); </script> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

3/3

首页

三星联合开发，真全面	realme Book增强版配置
小米12系列在西欧上线	iPhone 14 Pro前瞻工