how to rotate specific portion of the canvas

2018-06-29 22:44:03

i have create the canvas which has different background and over that another image in the middle of canvas,now i want to rotate that image at 90 at its place only,i tried lots of code but get nothing as result. how can i do that..??

<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>

链接地址: http://www.djcxy.com/p/83568.html

上一篇: 根据CSS属性创建条件

下一篇: 如何旋转画布的特定部分