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）后，输出图像变得难看。
有机会在不模糊的情况下打印画布内容吗？
您需要以打印尺寸制作实际的画布，然后使用CSS规则在屏幕上缩放它。
浏览器将始终首先使用内部位图大小，然后将其调整为打印或屏幕大小。如果位图具有高分辨率，则可以在打印上获得更好的结果。
但是请注意，在画布上打印时需要缩放每个坐标和尺寸。您还需要对屏幕和打印进行优先排序，因为其中之一看起来会更糟（如果您对打印进行优先排序，则在屏幕上显示不佳）。
这是您的画布的修改示例，现在相当于300 DPI（对比默认的96 DPI）。您可以看到它在屏幕上看起来差不多，但是在打印时会更加清晰。
/// conversion factor for scale, we want 300 DPI in this example
var dpiFactor = 300 / 96,
width = 400,
height = 100;
/// set canvas size representing 300 DPI
canvas.width = width * dpiFactor;
canvas.height = height * dpiFactor;
/// scale all content to fit the 96 DPI display (DPI doesn't really matter here)
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
/// scale all sizes incl. font size
ctx.font = (15 * dpiFactor).toFixed(0) + 'px sans-serif';
/// scale all positions
ctx.fillText('Fill Text, 18px, sans-serif', 10 * dpiFactor, 20 * dpiFactor);
只需使用包装函数即可为您完成所有数学运算：
function fillText(txt, x, y) {
ctx.fillText(txt, x * dpiFactor, y * dpiFactor);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句