任意旋转图片的js实例
成都创新互联公司主营南漳网站建设的网络公司,主营网站建设方案,成都app软件开发,南漳h5微信小程序开发搭建,南漳网站营销推广欢迎南漳等地区企业咨询
Html代码
任意旋转图片
Js代码
function rotate(id,angle,whence){
var p=document.getElementById(id);
//we store the angle inside the image tag for persistence
if(!whence){
p.angle=((p.angle==undefined?0:p.angle)+angle)%360;
}else{
p.angle=angle;
}
if(p.angle>=0){
var rotation=Math.PI*p.angle/180;
}else{
var rotation=Math.PI*(360+p.angle)/180;
}
var costheta=Math.cos(rotation);
var sintheta=Math.sin(rotation);
if(document.all&&!window.opera){
var canvas=document.createElement('img');
canvas.src=p.src;
canvas.height=p.height;
canvas.width=p.width;
canvas.style.filter="progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";
}else{
var canvas=document.createElement('canvas');
if(!p.oImage){
canvas.oImage=new Image();
canvas.oImage.src=p.src;
}else{
canvas.oImage=p.oImage;
}
canvas.style.width=canvas.width=Math.abs(costheta*canvas.oImage.width)+Math.abs(sintheta*canvas.oImage.height);
canvas.style.height=canvas.height=Math.abs(costheta*canvas.oImage.height)+Math.abs(sintheta*canvas.oImage.width);
var context=canvas.getContext('2d');
context.save();
if(rotation<=Math.PI/2){
context.translate(sintheta*canvas.oImage.height,0);
}else if(rotation<=Math.PI){
context.translate(canvas.width,-costheta*canvas.oImage.height);
}else if(rotation<=1.5*Math.PI){
context.translate(-costheta*canvas.oImage.width,canvas.height);
}else{
context.translate(0,-sintheta*canvas.oImage.width);
}
context.rotate(rotation);
context.drawImage(canvas.oImage,0,0,canvas.oImage.width,canvas.oImage.height);
context.restore();
}
canvas.id=p.id;
canvas.angle=p.angle;
p.parentNode.replaceChild(canvas,p);
}
function rotateRight(id,angle){
rotate(id,angle==undefined?90:angle);
}
function rotateLeft(id,angle){
rotate(id,angle==undefined?-90:-angle);
}
文章名称：前端设计中的一些特效任意旋转图片的js实例
转载来源：
http://kswsj.cn/article/sisesd.html
