html5 canvas防微博旋转

浏览数：26 / 时间：2015年06月09日

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function ()
{
    var oimg = document.getElementById(‘img1‘);
    var ainput = document.getElementsByTagName(‘input‘);
    var inum = 0;
    
    var yimg = new Image();
    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 ()
        {
            if(inum == 3)
            {
                inum = 0;
            }
            else
            {
                inum ++;
            }
            
            tochange();
        }
        
        ainput[0].onclick = function ()
        {
            if(inum == 0)
            {
                inum = 3;
            }
            else
            {
                inum --;
            }
            
            tochange();
        }
        
        function tochange()
        {
            switch(inum)
            {
                case 1:
                    oc.width = obj.height;
                    oc.height = obj.width;
                    ogc.rotate(90*Math.PI/180);
                    ogc.drawImage(obj,0,-obj.height)
                    break;
                case 2:
                    oc.width = obj.width;
                    oc.height = obj.height;
                    ogc.rotate(180*Math.PI/180);
                    ogc.drawImage(obj,-obj.width,-obj.height)
                    break;
                case 3:
                    oc.width = obj.height;
                    oc.height = obj.width;
                    ogc.rotate(270*Math.PI/180);
                    ogc.drawImage(obj,-obj.width,0)
                    break;
                case 0:
                    oc.width = obj.width;
                    oc.height = obj.height;
                    ogc.rotate(0);
                    ogc.drawImage(obj,0,0)
                    break;            
            }
        }
    }
    
}
</script>
<style>
body{
    background:pink;
    }
#c1{
    background:white;
    }    
</style>
</head>

<body>
<input type="button"  value="←"/>
<input type="button" value="→"/>
<div>
    <img id="img1" src="img/5-5.jpg">
</div>
</body>
</html>