canvas在舞台上点击后图片旋转_Canvas实现图片360度旋转

window.onload = function() {

var inputval = document.getElementsByTagName('input');

var imgval = document.getElementById('img');

var yimg = new Image();

var iNow = 0;

yimg.onload = function() {

draw(imgval);

}

yimg.src = imgval.src;

function draw(obj) {

var c = document.createElement('canvas');

var cxt = c.getContext('2d');

c.width = obj.width;

c.height = obj.height;

obj.parentNode.replaceChild(c, obj);

cxt.drawImage(obj, 0, 0);

inputval[1].onclick = function() {

if (iNow == 3) {

iNow = 0;

} else {

iNow++;

}

toChange();

};

inputval[0].onclick = function() {

if (iNow == 0) {

iNow = 3;

} else {

iNow--;

}

toChange();

};

function toChange() {

switch (iNow) {

case 0:

c.width = obj.width;

c.height = obj.height;

cxt.rotate(0 * Math.PI / 180);

cxt.drawImage(obj, 0, 0);

break;

case 1:

c.width = obj.height;

c.height = obj.width;

cxt.rotate(90 * Math.PI / 180);

cxt.drawImage(obj, 0, -obj.height);

break;

case 2:

c.width = obj.width;

c.height = obj.height;

cxt.rotate(180 * Math.PI / 180);

cxt.drawImage(obj, -obj.width, -obj.height);

break;

case 3:

c.width = obj.height;

c.height = obj.width;

cxt.rotate(270 * Math.PI / 180);

cxt.drawImage(obj, -obj.width, 0);

break;

case 4:

c.width = obj.width;

c.height = obj.height;

cxt.rotate(360 * Math.PI / 180);

cxt.drawImage(obj, obj.width, obj.height);

break;

}

}

}

}