javascript结合canvas实现图片旋转效果
我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果。本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果。我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转。
HTML
我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转。
Javascript
rush:js;">
function rotate(obj,arr){
var img = document.getElementById(obj);
if(!img || !arr) return false;
var n = img.getAttribute('step');
if(n== null) n=0;
if(arr=='left'){
(n==0)? n=3:n--;
}else if(arr=='right'){
(n==3)? n=0:n++;
}
img.setAttribute('step',n);
...
}
我们写了个自定义函数rotate(),其中参数obj表示要旋转的图片对象的id,参数arr表示旋转方向,固定两个值:left(向左)和right(向右)。我们设置变量n是为了记录上下左右四种旋转状态,点击旋转按钮时可以保证持续的旋转的状态,即每次旋转是在上次旋转操作后的基础上再次旋转。
然后,我们要根据浏览器的不同进行不同的处理,对于IE系浏览器,可以使用他们特有的滤镜来实现旋转效果,虽然我们不建议使用滤镜,但为了兼容IE老版本,我们不得不重操这把旧刀。
rush:js;">
function rotate(obj,arr){
...
//对IE浏览器使用滤镜旋转
if(document.all) {
img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
// 对现代浏览器写入HTML5的元素进行旋转: canvas
}else{
...
}
}
代码中,我们使用document.all判断是否为IE浏览器,如果是则使用滤镜,而对于firefox和chrome这样的现代浏览器,我们使用canvas来实现旋转效果。
rush:js;">
function rotate(obj,arr){
...
// 对现代浏览器写入HTML5的元素进行旋转: canvas
}else{
var c = document.getElementById('canvas_'+obj);
if(c== null){
img.style.visibility = 'hidden';
img.style.position = 'absolute';
c = document.createElement('canvas');
c.setAttribute("id",'canvas_'+obj);
img.parentNode.appendChild(c);
}
var canvasContext = c.getContext('2d');
switch(n) {
default :
case 0 :
c.setAttribute('width',img.width);
c.setAttribute('height',img.height);
canvasContext.rotate(0 * Math.PI / 180);
canvasContext.drawImage(img,0);
break;
case 1 :
c.setAttribute('width',img.height);
c.setAttribute('height',img.width);
canvasContext.rotate(90 * Math.PI / 180);
canvasContext.drawImage(img,-img.height);
break;
case 2 :
c.setAttribute('width',img.height);
canvasContext.rotate(180 * Math.PI / 180);
canvasContext.drawImage(img,-img.width,-img.height);
break;
case 3 :
c.setAttribute('width',img.width);
canvasContext.rotate(270 * Math.PI / 180);
canvasContext.drawImage(img,0);
break;
};
}
}
代码中,我们创建canvas元素对象,并将图片赋予canvas对象,当变量n处于不同的状态(上下左右四个方向)时,使用canvas重新对图像进行绘制。
当然,图片的旋转效果实现还有一种解决方案,绕开html5,针对各不同的浏览器,比如firefox下面可以用-moz-transform: rotate(); webkit可以用-webkit-transform: rotate(); 但这并不如html5的canvas实现的效果好。
以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。