0

現在、キャンバス上で回転させたい画像が 2 つあります。保存して復元しようとしましたが、うまくいきませんでした

        function SetCanvas()
       {
        var canvas = document.getElementById('pic1');

        if(canvas.getContext)
        {
             var ctx = canvas.getContext('2d');
          //    ctx.save();
              ctx.rotate(0.5);
             var image = new Image();
              image.src ='ME.JPG';
              image.onload = function(){

                  ctx.drawImage(image, 90,0,200,100);

              };
        }
            //ctx.restore();
            var canvas2 = document.getElementById("pic2");
            var image2 = new Image();
            image2.src = 'ME2.JPG';
            if(canvas2.getContext)
            {
                    image2.onload = function(){
                            ctx2=canvas2.getContext('2d');
                            ctx2.drawImage(image2, 0,0,200,100); 
                    };
            }


        }

          <ul id="picsCanvas" style="overflow:hidden;white-space:nowrap; list-style-type:none;">
               <li style=" display:inline; float:left" id="first">
                    <canvas ID="pic1" width="300" height="360" ></canvas>
               </li>
                <li id="second" style="margin-top:0px; display:inline; float:left; position:absolute ">
                    <canvas id="pic2" width="300" height="360"  style="position:absolute" ></canvas>
               </li>
            </ul>

少し前に行ったものであるため、コードが正しくない可能性があることに注意してください。それを行う方法を知りたいだけで、可能であれば...助けてくれてありがとう。

4

2 に答える 2

0

これらの2つのリンクは、HTML5キャンバスで回転する方法のかなり良い説明と例を提供します

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations

回転するときにさまざまな角度を設定します (以下のコード例を参照)。その一般的な要点は次のとおりです。

1) save the context
2) transform to, usually, the center of the image
3) rotate
4) transform back
5) draw image
6) restore

あなたの場合、2 つの画像を使用して、2 番目の回転呼び出しを行う前に、原点を 2 番目の画像に変換する必要があります。以下は、1 つの画像を回転させる簡単な例です。それをソートしてから、2番目の変換/回転を行います。

例：

var canvas = document.getElementById("yourCanvas");
var ctx     = canvas.getContext("2d");
var angle = 0;
window.setInterval(function(){
    angle = angle+1;
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.save();
    ctx.fillStyle = "#FF0000";

    // first image
    ctx.translate(150,200);
    ctx.rotate( angle*Math.PI/180 );  // rotate 90 degrees
    ctx.translate(-150,-200);

    ctx.fillStyle = "black";  
    ctx.fillRect(100, 150, 100, 100); 
    ctx.fill();

    ctx.restore();
}, 5);​
于 2012-06-27T21:52:04.547 に答える
0

画像は非同期で読み込まれます。これは、関数全体 (onload画像のハンドラーを除く) が最初に実行されることを意味します。次に、画像が読み込まれると、それらのハンドラーが呼び出されます。これは 2 番目のパスで発生します。これが発生するまでに、キャンバスを効果的に回転および復元しています。回転を拭き取ります。

onload簡単な修正は、各画像ハンドラー内でキャンバスを回転および復元することです。

于 2012-06-28T01:37:49.233 に答える