Canvas实现图片360度旋转

Html

Css

input {
	font-size:18px;
	padding:5px 20px 5px 20px;
	font-weight:bold;
	color:white;
	background-color:#c5464a;
	cursor:pointer;
	border:none;
	outline:none;
	border-radius:7px 7px 7px 7px;
}

window.onload = function() {
    var inputval = document.getElementsByTagName('input');
    var imgval = document.getElementById('img');
    var yimg = new Image();
    var iNow = 0;
    yimg.onload = function() {
        draw(imgval);
    }

yimg.src = imgval.src;

function draw(obj) {
        var c = document.createElement('canvas');
        var cxt = c.getContext('2d');

c.width = obj.width;
        c.height = obj.height;

obj.parentNode.replaceChild(c, obj);

cxt.drawImage(obj, 0, 0);

inputval[1].onclick = function() {
            if (iNow == 3) {
                iNow = 0;
            } else {
                iNow++;
            }
            toChange();
        };

inputval[0].onclick = function() {
            if (iNow == 0) {
                iNow = 3;
            } else {
                iNow--;
            }
            toChange();
        };

function toChange() {
            switch (iNow) {
                case 0:
                    c.width = obj.width;
                    c.height = obj.height;
                    cxt.rotate(0 * Math.PI / 180);
                    cxt.drawImage(obj, 0, 0);
                    break;
                case 1:
                    c.width = obj.height;
                    c.height = obj.width;
                    cxt.rotate(90 * Math.PI / 180);
                    cxt.drawImage(obj, 0, -obj.height);
                    break;
                case 2:
                    c.width = obj.width;
                    c.height = obj.height;
                    cxt.rotate(180 * Math.PI / 180);
                    cxt.drawImage(obj, -obj.width, -obj.height);
                    break;
                case 3:
                    c.width = obj.height;
                    c.height = obj.width;
                    cxt.rotate(270 * Math.PI / 180);
                    cxt.drawImage(obj, -obj.width, 0);
                    break;
                case 4:
                    c.width = obj.width;
                    c.height = obj.height;
                    cxt.rotate(360 * Math.PI / 180);
                    cxt.drawImage(obj, obj.width, obj.height);
                    break;
            }
        }
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

Canvas实现图片360度旋转



代码描述：Canvas实现图片360度旋转

2

最新

发表评论全部评论

暂时没有评论！

十指、温存0

2017/6/7 14:48:21

666
回复

泡??斌メ0

2017/6/7 13:45:54

666
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

让我感激你、曾予我欢颜

相关代码

Canvas实现图片360度旋转

最新