如何避免使用 <canvas> 旋转的图像截断？
Posted
技术标签:
【中文标题】如何避免使用 <canvas> 旋转的图像截断？【英文标题】：How to avoid image cutoff with <canvas> rotate? 【发布时间】：2010-09-26 18:55:56 【问题描述】：当您使用画布旋转图像时，它会被切断 - 我该如何避免这种情况？我已经使画布元素比图像大，但它仍然切断边缘。
例子：
<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;" ></canvas>
</body>
</html>
【问题讨论】：
【参考方案1】：旋转总是围绕当前原点进行。因此，您可能需要先使用 translate 将画布平移到要围绕其旋转的位置（例如中心），然后再旋转。
例如
ctx.translate(85, 85);
ctx.rotate(5 * Math.PI / 180);
画布现在围绕 (85, 85) 旋转。
【讨论】：
【参考方案2】：除了在旋转之前旋转画布，您还需要在放置图像之前再次使用“翻译”，如下所示：
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 坐标。
【讨论】：
【参考方案3】：或者简单地在画布中包含保存和恢复功能
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();
希望这可以帮助某人:)
【讨论】：
【参考方案4】：我创建了一个完整的函数，可以根据角度和位置排列图像
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/>
【讨论】：
以上是关于如何避免使用 <canvas> 旋转的图像截断？的主要内容，如果未能解决你的问题，请参考以下文章