怎样可以用HTML5 canvas旋转图片

img.style.display=''none'';
canvas=document.createElement(''canvas'');
canvas.setAttribute(''id'',''pic_''+pid);
img.parentNode.appendChild(canvas);
}
//旋转角度以弧度值为参数
vardegree=step90Math.PI/180;
varctx=canvas.getContext(''2d'');
switch(step){
case0:www.jds567.com金德胜棋牌官网
canvas.width=width;
canvas.height=height;
ctx.drawImage(img,0,0);
break;
case1:
canvas.width=height;
canvas.height=width;
ctx.rotate(degree);
ctx.drawImage(img,0,-height);
break;
case2:www.jds006.com金德胜捕鱼平台
canvas.width=width;
canvas.height=height;
ctx.rotate(degree);
ctx.drawImage(img,-width,-height);
break;
case3:
canvas.width=height;
canvas.height=width;
ctx.rotate(degree);
ctx.drawImage(img,-width,0);
break;
}
}


解释：canvas.width与height就不用解释了吧，应该。rotate应该也不用吧？关键是
drawImage(img,x,y);
其中的x，y是指从哪一点开始画，因为整个坐标系统旋转了，所以，x，y不一样，比如step=1，
图片向右旋转了90度，即坐标系旋转了90度，那么起始位置应该是
x=0,y=img.height
其它类似可得。是不是觉得很简单呢？