如何避免圖像中斷<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>旋轉？

回答

相關問題