canvas实现图片围绕左上角一点进行旋转

canvas插入图片，需要先在onload事件中预加载图片，然后在用drawImage（）方法插入图片。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="逆时针" />
        <input type="button" value="顺时针" />
        <div id="">
            <img src="img/code.jpg" id="myimg"/>
        </div>
    </body>
    <script>
        window.onload = function(){
            var aInput = document.getElementsByTagName('input');
            var oImg = document.getElementById('myimg');

            var yImg = new Image();
            var isNow = 0;

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

            yImg.src = oImg.src;

            function draw(obj){
                var oC = document.createElement('canvas');//创建canvas节点用来替换img节点
                var oGc = oC.getContext('2d');
                //将canvas的宽高和图片宽高设置成一样的
                oC.width = obj.width; 
                oC.height = obj.height;

                obj.parentNode.replaceChild(oC,obj);
                oGc.drawImage(obj,0,0);

                aInput[0].onclick = function(){
                    if (isNow == 0) {
                        isNow = 3;
                    } else{
                        isNow--;
                    }
                    tochange();
                }
                aInput[1].onclick = function(){
                    if (isNow ==3) {
                        isNow = 0;
                    } else{
                        isNow++;
                    }
                    tochange();
                }

                function tochange(){
                switch (isNow){
                    case 0:
                        oC.width = obj.width;
                        oC.height = obj.height;
                        oGc.rotate(0);
                        oGc.drawImage(obj,0,0);
                        break;
                    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;
                    default:
                        break;
                }
            }
            }   
        }
    </script>
</html>
canvas实现图片围绕左上角一点进行旋转

猜你喜欢
