16

キャンバスを使用して画像を回転すると、画像が切り取られます-これを回避するにはどうすればよいですか？すでにキャンバス要素を画像よりも大きくしましたが、それでもエッジが途切れています。

例：

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

4 に答える 4

10

回転する前にキャンバスを回転させることに加えて、次のように、画像を配置する直前にもう一度「変換」を使用する必要があります。

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-18T22:15:56.613 に答える
6

回転は常に現在の原点を中心に発生します。したがって、最初に移動を使用して、キャンバスを回転させたい位置（たとえば中央）に移動してから回転することをお勧めします。

例えば

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

キャンバスが回転します（85、85）。

于 2008-12-13T14:53:37.783 に答える
0

角度と位置に応じて画像を配置する完全な機能を作成しました

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-22T11:50:25.333 に答える