Question

我创建了画布，它具有不同的背景和画布中间的另一个图像，现在我想将该图像旋转到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>

如何旋转画布的特定部分

0 个答案: