web-dev-qa-db-ja.com

HTML 5でキャンバスを破棄/再ロードする方法は？

私は電子ブックアプリケーションに取り組んでいます。PDF.jsを使用してキャンバスに各ページを描画します。問題は、ボタンをクリックして別のページに移動すると、同じキャンバスにもう一度レンダリングしようとしただけですが、キャンバスが動いているようです間違った場所やサイズに。

function renderPage(url) {
      canvas = document.getElementById('canvas');
      ctx = canvas.getContext('2d');
      //clearCanvasGrid('canvas');

      PDFJS.getDocument(url).then(function (pdf) {
          // Using promise to fetch the page
          pdf.getPage(1).then(function(page) {
            var viewport = page.getViewport(5); //scale 5

            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
              canvasContext: ctx,
              viewport: viewport
            };

            page.render(renderContext).then(function() {
                initialZoomPage(viewport.height,viewport.width);
            });
        });
    });
}

では、ページを再描画する前に必要な手順はありますか？また、ページを閉じたい場合はどうすれば破棄できますか？ありがとう

更新：

function clearCanvasGrid(canvasID){
    canvas = document.getElementById(canvasID); //because we are looping //each location has its own canvas ID
    context = canvas.getContext('2d');
    //context.beginPath();

    // Store the current transformation matrix
    context.save();

    // Use the identity matrix while clearing the canvas
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Restore the transform
    context.restore(); //CLEARS THE SPECIFIC CANVAS COMPLETELY FOR NEW DRAWING
}

キャンバスをクリアする関数を見つけましたが、clearRectの他に.save、.setTransform、.restoreがありますが、それらは必要ですか？ありがとう

javascriptjqueryhtmlcanvashtml5-canvas
11
user782104

1つの方法は、 context.clearRect(0,0, width, height)（参照） を使用してキャンバスをクリアすることです。

または、新しいページが必要になるたびに、新しいキャンバス要素を追加することができます（また、再度表示するかどうかに応じて、古いキャンバス要素を削除することもできます）。このような何かがそれをするはずです：

var oldcanv = document.getElementById('canvas');
document.removeChild(oldcanv)

var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);

複数保持する場合は、それぞれにid="canvas"だけではなく、一意のidが必要です（おそらく、ページ番号に基づく-canvas-1など）。

更新された質問への回答：

save、setTransform、およびrestoreは、変換を実行している（またはユーザーに何らかの形で変換を許可している）場合にのみ必要です。 PDF.jsライブラリが舞台裏で変換を行うかどうかはわかりません。そのため、そのままにしておくのが最善の方法です。

15
Moshe Katz

clearRect（） を使用してみてください：

canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
9
Sudhir Bastakoti