0

親divから高さを取得する2つのキャンバス要素があります。

var canvas = document.getElementById("canvas");
var canvas2 = document.getElementById("canvas2");
canvas.width = canvas.width;
canvas.height = canvas.height;
canvas2.width = canvas2.width;
canvas2.height = canvas2.height;

canvas 要素のサイズは DOM で正しいです。drawImage() 関数で問題が発生しました。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
for(var i = 0;i<len;i++){ 
  !magic drawings!
}
ctx2.drawImage(canvas, 0, 0);

問題は、最初のキャンバスを canvas2 にコピーすることです。最初のキャンバスの高さが 150px の場合、高さ 200px の 2 番目のキャンバスに 150px のキャンバス描画のみが適用されます。

アイデアや提案はありますか？

編集

1つの可能な解決策はわかりましたが、きれいではありません。

ctx2.drawImage(canvas, 0, 0, canvas2.width, canvas2.height);

したがって、キャンバスのサイズが変更されます。幅は変わらないので、高さに関しては伸びます。完璧な解決策ではありません。

4

1 に答える 1

0

キャンバス コンテキストのスケーリング パラメータを使用して、引き伸ばされないようにします

var scaleFactor=canvas2.height/canvas.height;

ctx2.drawImage(canvas,0,0,canvas.width,canvas.height,
                      0,0,canvas.width*scaleFactor,canvas.height*scaleFactor);
于 2013-08-19T15:28:15.210 に答える