如何旋转画布的特定部分
我创建了具有不同背景和画布中间的另一个图像的画布，现在我只想在90处旋转该图像，我尝试了很多代码，但没有得到任何结果。 我怎样才能做到这一点..？？
<style type="text/css" media="screen">
canvas, img { display:block; margin:1em auto; border:1px solid black; }
canvas { background:url(http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg) }
</style>
</head><body>
<button id="clockwise">Rotate right</button>
<canvas width="300" height="300"></canvas>
<img>
<script type="text/javascript" charset="utf-8">
var can = document.getElementsByTagName('canvas')[0];
var ctx = can.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 6;
ctx.lineJoin = 'round';
ctx.strokeRect(40,100,150,100);
var angleInDegrees=0;
var img = document.getElementsByTagName('img')[0];
img.src="http://media1.santabanta.com/full1/Miscellaneous/Cartoon%20Characters/cartoon-characters-47a.jpg";
ctx.drawImage(img,40,100,150,100);
function drawRotated(degrees){
ctx.clearRect(40,100,150,100);
ctx.save();
ctx.translate(40,100,150,100);
ctx.rotate(degrees*Math.PI/180);
ctx.drawImage(img,-img.width/2,-img.width/2);
ctx.restore();
}
$("#clockwise").click(function(){
angleInDegrees+=30;
drawRotated(angleInDegrees);
});
</script>
</body></html>