2

いくつかの情報を入力し、その情報に基づいてキャンバス要素に画像を描画できる Web ページを作成しました。印刷以外はほぼ思い通りに動作しています。

キャンバス要素を印刷する方法はありますか、それを行う唯一の方法は描画する新しいウィンドウを作成することですか?

アップデート：

答えはとてもシンプルでした。私はもっ​​と複雑な解決策を考えていました。

複数の回答を選択できれば幸いです。* を使用して表示を無効にすると、キャンバスを印刷できませんでした。最も簡単な解決策は、@media print{} 内の CSS でフォ​​ーム {display:none;} を使用して、入力に使用していたフォームをオフにすることでした。迅速な返答に感謝致します。



    @media print {
           form {
         display:none;
       }
    }
4

3 に答える 3

5

次のようなことを試すことができます：

@media print {
  * {
    display:none;
  }

  #SOME-CANVAS-ID {
    display:block;
  }
}

キャンバスがデフォルトでブロックされているかどうかはわかりませんが、その線に沿って何かを試して、それが機能するかどうかを確認できます. アイデアは、ルールの優先順位が高い限り、他の任意の要素を除いて、印刷メディアのすべて (*) を非表示にするというものです (これが ID セレクターを使用した理由です)。

編集: CSS3 (特にnegation pseudo-class ) がより多くサポートされている場合、ルールは次のように単純になります。

*:not(canvas) {
  display:none;
}

ただし、これにより <html> および <body> タグが非表示になり、キャンバスも効果的に非表示になる可能性があります...

于 2008-10-05T18:10:58.233 に答える
1

サポートについて 100% 確信があるわけではありませんが、CSS を使用して の<link>タグに属性を入れることができますmedia="print"。この CSS ファイルでは、印刷中に表示したくない要素を非表示にします。display:none;

于 2008-10-05T18:10:34.523 に答える
0

印刷専用のキャンバスを作成してみることができます:

this.Print = function () {
    var printCanvas = $('#printCanvas');
    printCanvas.attr("width", mainCanvas.width);
    printCanvas.attr("height", mainCanvas.height);
    var printCanvasContext = printCanvas.get(0).getContext('2d');
    window.print();
}
于 2012-11-23T15:19:20.423 に答える