描かれたものをクリアせずにHTML5キャンバスを動的に拡張する方法はありますか？

StackOverflow https://stackoverflow.com/questions/2405772

  •  18-09-2019
  •  | 
  •  

質問

見る これ

出力がページの下部に到達したら、キャンバスを自動的に拡張して、継続できるようにしたいと思います。 Canvas.heightプロパティを設定しようとしましたが、ウィンドウがクリアされます。これを行う方法はありますか？

役に立ちましたか？

解決

私がやること：
キャンバスと同じサイズのダミーキャンバスを作成します。 

dummyCanvas.getContext('2d').drawImage(yourCanvas, 0, 0);
newCanvas = recreate(yourCanvas);
newCanvas.getContext('2d').drawImage(dummyCanvas);

それほどきれいではありません。特に、キャンバスを1秒以上再作成する必要がある状況では...他の答えを見ることに興味があります... ClientWidth/ClientHeightが変更されたときにキャンバスをサイズ変更するだけなので、それは私のために働きます[ウィンドウ.Onresize

他のヒント

しかし、これは今のような古いものであることを知っています：

Itzwartyが説明するように、キャンバスを再現する必要はありません。あなたはこれを行うことができます：

<html>...
  <canvas id="canvas"></canvas>
  <canvas id="buffer" style="display:none;"></canvas>
  ...
</html>

そうすれば、これはあなたのJavaScriptになります：

var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
window.onresize = function(event) {
    var w = $(window).width(); //Using jQuery for easy multi browser support.
    var h = $(window).height();
    buffer.width = w;
    buffer.height = h;
    buffer.getContext('2d').drawImage(canvas, 0, 0);
    canvas.width = w;
    canvas.height = h;
    canvas.getContext('2d').drawImage(buffer, 0, 0);
}

ここでは、キャンバスのサイズのみを変更し、画像をコピーします。確かではありませんが、パフォーマンスは少し良くなり、私の意見では、よりシンプルで理解しやすいと思います。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top