追风之云

var imageRotate = new Class ({
initialize: function(img) {
this._img = img;
this.rotation = 0;
this.width = img.getProperty('width');
this.height = img.getProperty('height');
if (!Browser.ie) {
var canvas = new Element('canvas', {'width': this.width, 'height': this.height});
this.ctx = canvas.getContext('2d');
this.ctx.drawImage(this._img, 0, 0);
this._ghost = this._img;
this._img = canvas.replaces(this._img);
}
},

rotate: function() {
switch (this.rotation) {
case 0:
this._img.setProperty('width', this.width);
this._img.setProperty('height', this.height);
break;

case 1:
this._img.setProperty('width', this.height);
this._img.setProperty('height', this.width);
break;

case 2:
this._img.setProperty('width', this.width);
this._img.setProperty('height', this.height);
break;

case 3:
this._img.setProperty('width', this.height);
this._img.setProperty('height', this.width);
break;
}

if (Browser.ie) {
this._img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation='+ this.rotation + ')';
}
else {
switch (this.rotation) {
case 0:
this.ctx.drawImage(this._ghost, 0, 0);
break;

case 1:
this.ctx.rotate(90*Math.PI/180);
this.ctx.drawImage(this._ghost, 0, -this.height);
break;

case 2:
this.ctx.rotate(180*Math.PI/180);
this.ctx.drawImage(this._ghost, -this._ghost.width, -this._ghost.height);
break;

case 3:
this.ctx.rotate(270*Math.PI/180);
this.ctx.drawImage(this._ghost, -this._ghost.width, 0);
break;
}
}
},

left: function() {
if (this.rotation == 0) {
this.rotation = 3;
}
else {
this.rotation--;
}
this.rotate();
},

right: function() {
if (this.rotation == 3) {
this.rotation = 0;
}
else {
this.rotation++;
}
this.rotate();
}
});

参考:
http://foxling.cn/js-ajax-dom/js-rotate-picture/