3 
var print = document.createElement('button');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

canvas.width = 300;
canvas.height = 100;

ctx.fillStyle = '#000';
ctx.font = '15px sans-serif';
ctx.fillText('Fill Text, 18px, sans-serif', 10, 20);

print.innerHTML = 'Print';

document.body.appendChild(print);
document.body.appendChild(canvas);

print.addEventListener('click', function () {
    window.print();
});

http://jsfiddle.net/vpetrychuk/LWup5/ .

ご覧のとおり、キャンバス内のテキストは問題なく表示されますが、[印刷] ボタンをクリックして (ページを PDF として保存すると)、出力画像が見苦しくなります。

キャンバスの内容をぼやけずに印刷する機会はありますか?

4

5 に答える 5

1

印刷がいつ行われるかを検出することはできますが (たとえば、 Webkit を使用window.matchMedia)、実際の印刷は制御できないスケーリングを使用して行われるため、鮮明なグラフィックス用の完全な 1x1 のスケーリングされたキャンバスを作成することは不可能です。

印刷を検出したら、キャンバスを十分に高い解像度のバージョンに置き換えることができますが、出力の正確な実際のサイズは不明です。ユーザーがページのズーム ビューを持っているようなものです...キャンバスがシャープに描画されていても、ブラウザはそれをズームして結果をぼやけさせることができます。

おそらくテキストの場合、最良の品質のオプションは、使用するdiv代わりにキャンバスにオーバーインポーズされた通常のテキストを使用するfillTextことです (もちろん、これはすべてのユースケースで機能するとは限りません)。

于 2013-11-03T16:27:36.770 に答える
0

私はキャンバスのCSSを持っていたwidth: 100%ので、スケーリングが間違っていました

100%からに変更することで修正210mm

于 2016-01-14T11:32:02.990 に答える
0

より良い解決策は、canvas.toDataURL() メソッドを使用し、結果の文字列を img の src に設定することです。これを行うときは、JavaScript を使用してキャンバスを生成し、ページの本文に実際に追加しないでください。

于 2016-03-16T23:01:11.957 に答える