canvas的图片旋转实例 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{background: black;}
            div{background: wheat;}
        </style>
        <script>
            window.onload=function(){
                var aput=document.getElementsByTagName('input');
                var aimg=document.getElementById('img1');
                var bimg=new Image();
                var inow=0;
                bimg.onload=function(){
                    draw(aimg);
                };
                bimg.src=aimg.src;
                function draw(obj){
                    var oc=document.createElement('canvas');
                    var gc=oc.getContext('2d');
                    oc.width=obj.width;
                    oc.height=obj.height;
                    obj.parentNode.replaceChild(oc,obj);
                    gc.drawImage(obj,0,0);
                                        //第二个按钮，点击一下让图片顺时针旋转90度
                    aput[1].onclick=function(){
                        if(inow==3){
                            inow=0;
                        }else{
                            inow++;
                        }
                        
                        toChang();
                    };
                    //逆向旋转
                    aput[0].onclick=function(){
                        if(inow==0){
                            inow=3;
                        }else{
                            inow--;
                        }
                        
                        toChang();
                    };
                    function toChang(){
                        switch(inow){
                            case 1:
                            oc.width=obj.height;
                            oc.height=obj.width;
                            gc.rotate(90*Math.PI/180);
                            gc.drawImage(obj,0,-obj.height);//调整图片位置
                            break;
                            
                            case 2:
                            oc.width=obj.width;
                            oc.height=obj.height;
                            gc.rotate(180*Math.PI/180);
                            gc.drawImage(obj,-obj.width,-obj.height);
                            break;
                            
                            case 3:
                            oc.width=obj.height;
                            oc.height=obj.width;
                            gc.rotate(270*Math.PI/180);
                            gc.drawImage(obj,-obj.width,0);
                            break;
                            
                            case 0:
                            oc.width=obj.width;
                            oc.height=obj.height;
                            gc.rotate(0);
                            gc.drawImage(obj,0,0);
                            break;
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
     <input type="button" value="1" />
     <input type="button" value="2" />
     <div>
         <img src="img/01.jpg" id="img1"/>
     </div>
    </body>
</html>

点击按钮，图片旋转

posted @ 2018-12-02 14:17  A-zero  阅读(1479)  评论(0)    收藏  举报