1

画像をキャンバスにロードする前に、画像を回転させる必要があります。私の知る限り、canvas.rotate（）を使用して回転させることはできません。これは、シーン全体を回転させるためです。

画像を回転させる良いJSの方法はありますか？[ブラウザに依存する方法ではありません]

4

2 に答える 2

2

正確ではありませんが、シーンを保存し、画像を回転してからシーンを復元することができます。

var canvas = document.getElementById('canvas');
canvas.width = 600; 
canvas.height = 400; 
var ctx = canvas.getContext('2d'); 
var image = new Image();
image.src = 'https://www.google.ro/images/srpr/logo3w.png';
drawRotatedImage(image, 275, 95, 25); 

function drawRotatedImage(image, x, y, angle) { 
    ctx.save(); 
    ctx.translate(x, y);
    ctx.rotate(angle * (Math.PI/180));
    ctx.drawImage(image, -(image.width/2), -(image.height/2));
    ctx.restore(); 
}

JSFiddleの例

于 2012-09-18T08:10:57.893 に答える
0

uの場合、キャンバスを使用する代わりに、cssプロパティ変換を使用してhtml要素を回転、拡大縮小、変換できます。画像をx度回転させて画像を連続的に回転させる場合は、transform = "rotate（xdeg）"を使用する必要があります。次のコード。これをあなたのコードで見てください

<html>
<img id="t1" src="1.png">
</html>
and this is your javascript code
<script>
    var im;
    var w,h;
    var t=0;
    window.onload=function()
    {
     im=document.getElementById('t1');
     w=im.width;
     h=im.height;
         im.style.transform=im.style.webkitTransform|im.style.mozTransform|im.style.oTransform|i     m.style.transform;
     update();
    };
    function update()
    {

     im.style.transform="rotate("+t+"deg)";
     t+=10;
     setTimeout("update()",100);
    }
</script>
于 2014-07-19T21:52:33.047 に答える