html5 - 在canvas中图片旋转的问题-PHP中文网问答

在canvas中插入图片，当点击右箭头时，图片顺时针旋转90°，但是点击时没有效果，到底哪里错了，请各位老师指教，非常感谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{

background:black;

}
</style>

var aInput = document.getElementsByName("input");
var oImg = document.getElementById("img1");

var yImg = new Image();

var iNow = 0;   

yImg.onload = function() {
    draw(oImg);
}
yImg.src = oImg.src;

function draw(obj) {
    var oC = document.createElement("canvas");
    var oGC = oC.getContext('2d');
    
    oC.width = obj.width;
    oC.height = obj.height;
    
    obj.parentNode.replaceChild(oC,obj);   
    
    oGC.drawImage(obj,0,0);  
    aInput[1].onclick = function() {   
    iNow++;
    toChange();    
    }
    
    function toChange() {
        switch(iNow) {
            case 1:
                oC.width = obj.height;
                oC.height = obj.width;
                oGC.rotate(90*Math.PI/180);
                oGC.drawImage(obj,0,-obj.height);
            break;
        }
    }           
}

}
</script>

</head>