如何避免图像中断<canvas>旋转？

当您使用画布旋转图像时，它会被切断 - 我如何避免这种情况？我已经将画布元素制作得更大一些，但它仍然会切掉边缘。如何避免图像中断<canvas>旋转？

例子：

<html> 
    <head> 
     <title>test</title> 
     <script type="text/javascript"> 
      function startup() { 
       var canvas = document.getElementById('canvas'); 
       var ctx = canvas.getContext('2d'); 
       var img = new Image(); 
       img.src = 'player.gif'; 
       img.onload = function() { 
        ctx.rotate(5 * Math.PI/180); 
        ctx.drawImage(img, 0, 0, 64, 120); 
       } 
      } 
     </script> 
    </head> 
    <body onload='startup();'> 
     <canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" width="800" height="800"></canvas> 
    </body> 
</html>

来源

2008-12-13 Tom

旋转总是围绕当前原点发生。因此，您可能首先需要使用translate将画布转换为您想要旋转的位置（称为中心），然后旋转。

例如

ctx.translate(85, 85); 
ctx.rotate(5 * Math.PI/180);

画布现在旋转（85,85）。

来源

2008-12-13 14:53:37

除了旋转前旋转画布，你只是需要将图片放置，像这样前使用“翻译”了：只需添加图像再次使用翻译

前

ctx.translate(85, 85); 
ctx.rotate(5 * Math.PI/180); // for 5 degrees like the example from Vincent

然后

ctx.translate(-85, -85);

这会将ctx.drawImage（img，0,0,10,10）的（0,0）坐标移回CANVAS的预期0,0坐标。

来源

2009-06-18 22:15:56

或只需在画布

ctx.save(); 
ctx.translate(85,85); 
ctx.rotate(5 * Math.PI/180); 
ctx.fillRect(10,10,10,10); 
ctx.restore();

的保存和恢复功能，如果你想在周围绘制的对象旋转轴则可以通过将对象x位置和y位置转换。然后当创建对象时，它的x位置将是负半宽度，而y将是负半高。

实施例：

Square = { 
    x:10, 
    y:10, 
    width:10, 
    height:10, 
    angle:5 
} 
ctx.save(); 
ctx.translate(Square.x,Square.y); 
ctx.rotate(Square.angle * Math.PI/180); 
ctx.fillRect(-Square.width/2,-Square.height/2,Square.width,Square.height); 
ctx.restore();

希望这有助于有人:)

来源

2009-06-21 23:33:08

我根据角度和位置

function drawImage(myContext,imgSrc, x, y, size, rotate) {<br/> 
      var halfS = size/2;<br/> 
      var imageCursor = new Image();<br/> 
      imageCursor.src = imgSrc;<br/> 
      myContext.save();<br/> 
      var tX = x - halfS;<br/> 
      var tY = y - halfS;<br/> 
      myContext.translate(tX, tY);<br/> 
      myContext.rotate(Math.PI/180 * rotate);<br/> 
      var dX = 0, dY = 0;<br/> 
      if (rotate == 0) { dX = 0; dY = 0; }<br/> 
      else if (rotate > 0 && rotate < 90) { dX = 0; dY = -(size/(90/rotate)); }<br/> 
      else if (rotate == 90) { dX = 0; dY = -size; }<br/> 
      else if (rotate > 90 && rotate < 180) { dX = -(size/(90/(rotate - 90))); dY = -size; }<br/> 
      else if (rotate == 180) { dX = dY = -size; }<br/> 
      else if (rotate > 180 && rotate < 270) { dX = -size; dY = -size + (size/(90/(rotate - 180))); }<br/> 
      else if (rotate == 270) { dX = -size; dY = 0; }<br/> 
      else if (rotate > 270 && rotate < 360) { dX = -size + (size/(90/(rotate - 270))); dY = 0; }<br/> 
      else if (rotate == 360) { dX = 0; dY = 0; }<br/> 
      myContext.drawImage(imageCursor, dX, dY, size, size);<br/> 
      myContext.restore();<br/> 
     }

创建的排列图像的完整功能

来源

2011-11-22 11:50:25 luhuiya

如何避免图像中断<canvas>旋转？

回答

相关问题