0

サイズの異なる 2 つのキャンバスがあります。私の目標は、ユーザーの描画をメイン キャンバスから 2 番目のキャンバスに縮小版としてコピーすることです。これまでのところ、drawImage() とスケールは機能しているように見えますが、2 番目のキャンバスには新しいコピーと共にメインの図面の古いバージョンが保持されています。drawImage() を呼び出す前に毎回クリアしようとしましたが、何もしていないようです。関数が実行されるたびに現在の画像だけをセカンダリ キャンバスにコピーするにはどうすればよいですか?

$('#hand').dblclick(function(){
 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 //var imageData = context.getImageData(0, 0, 100, 100);
 var newCanvas = document.getElementById('scaledCanvas');
 var destCtx = newCanvas.getContext('2d');
 destCtx.clearRect(0, 0, newCanvas.width, newCanvas.height);
 destCtx.scale(.5,.5);
 destCtx.drawImage(canvas, 0, 0);
});

必要に応じて、さらにコードを含めることができます。また、スケールが呼び出され続けていることにも気付きました。これは、新しくコピーされたイメージが毎回小さくなる理由を説明しているため、別の問題である可能性があります。

4

1 に答える 1

1

実際には非常に単純です。変換 (移動、回転、またはスケーリング) と呼ばれるものを使用しています。

毎回「新しく」使用するには、キャンバスの状態を毎回保存して復元する必要があります。

$('#hand').dblclick(function(){
 var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 //var imageData = context.getImageData(0, 0, 100, 100);
 var newCanvas = document.getElementById('scaledCanvas');
 var destCtx = newCanvas.getContext('2d');
 destCtx.clearRect(0, 0, newCanvas.width, newCanvas.height);

 //save the current state of this canvas' drawing mode
 destCtx.save();

 destCtx.scale(.5,.5);
 destCtx.drawImage(canvas, 0, 0);

 //restore destCtx to a 1,1 scale (and also 0,0 origin and 0 rotation)
 destCtx.restore();

});

再帰関数などを使用して多くのクールな幾何学的トリックを実行するために、restore を呼び出す前に数回プッシュできることに注意することも重要です...

状態と変換の説明をご覧ください: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Transformations

これが、キャンバスの変換をもう少しよく理解するのに役立つことを願っています.

于 2013-02-05T04:44:29.253 に答える