3

次の問題が発生しました：

画像をキャンバスにロードして、それを使って処理を行います（色を反転するか、パフォーマンスが必要な処理を行います）。その後も、キャンバス（またはその中の操作された画像）を拡大縮小および回転できるようにしたいと思います。それは（私がそれを正しく理解した場合）、画像を再描画する必要があるためです。

だから：-どうにかして画像を保存し、操作後に再描画できますか（この場合、ctx.save（）とctx.restore（）は機能していないようです）-または、ピクセル操作によって回転およびスケーリングする必要がありますか（そうではありません）問題ですが、canvas-transformationでそれができればクールです）

ご協力ありがとうございました！

4

1 に答える 1

1

2つのキャンバス要素を使用して目的を達成できます。1つを操作用に描画し、次にそのキャンバスを2つ目に描画して、回転を適用します。

var canvas1 = document.createElement('canvas'),
    canvas2 = document.createElement('canvas'),
    ctx1 = canvas1.getContext('2d'),
    ctx2 = canvas2.getContext('2d');

/// use ctx1 to perform whatever manipulation you want, and then...

/// start
ctx2.save();
/// shift our "hotspot" to the center
ctx2.translate(canvas2.width / 2, canvas2.height / 2);
/// rotate 45 degrees clockwise.. obviously you can do what you want here
/// scale, fade, flip, stretch, rotate... whatever 
ctx2.rotate(Math.PI / 4);
/// draw your first canvas with it's manipulated image on to the second
/// along with it's rotation
ctx2.drawImage( canvas1, 0,0 );
/// all done
ctx2.restore();

上記の方が扱いやすいと思いますが、以下を使用することもできます。これにより、canvas要素の現在の画像データが取得/戻されます。

ctx.getImageData();
ctx.putImageData();

これらの使用方法については、こちらをご覧ください。

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Pixel_manipulation_with_canvas

http://www.w3schools.com/html5/canvas_getimagedata.asp

于 2012-10-07T20:35:37.087 に答える