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

来源：互联网发布：js去除数组重复元素编辑：程序博客网时间：2024/06/05 20:08
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>
阅读全文
0 0