canva旋转图片 js_Javascript与HTML5的canvas实现图片旋转效果

HTML

我们在页面中放置一张图片，在图片的上方放置两个按钮，通过onclick事件调用rotate()函数来控制图片向左向右旋转。

向左

向右

Javascript

function rotate(obj,arr){

var img = document.getElementById(obj);

if(!img || !arr) return false;

var n = img.getAttribute('step');

if(n== null) n=0;

if(arr=='left'){

(n==0)? n=3:n--;

}else if(arr=='right'){

(n==3)? n=0:n++;

}

img.setAttribute('step',n);

...

}

我们写了个自定义函数rotate()，其中参数obj表示要旋转的图片对象的id，参数arr表示旋转方向，固定两个值:left