滚动HTML5画布视口进行打印

Scrolling HTML5 Canvas viewport for printing

本文关键字：打印 视口 HTML5 布视口 滚动      更新时间：2023-09-26

我正在HTML5画布上绘制一系列矩形和文本。但这幅油画最终会被印刷出来。矩形是根据纸张（画布）的高度绘制的

唯一不会扭曲文本的画布宽度是300dpi或2400x3300画布。这在印刷品上效果很好，但在屏幕上明显是巨大的。

我希望用户在左侧有一个缩小的画布版本，它适合父容器的100%高度，并带有用于溢出的滚动条。

我尝试过div溢出：auto。。这确实有效，但没有缩放（仍在滚动一个巨大的版本）。因此，基本上我想缩放浏览器窗口的图像，但从大画布上执行所有drawing/printing。

对于这个场景，您可以在画布中使用CSS规则。

在线演示此处

保持像素大小，但将以下规则添加到画布元素本身（假设画布的id为canvas）：

canvas.style.width = 'auto';
canvas.style.height = '100%';

或者通过CSS和HTML:将CSS规则应用于元素

.printCanvas {
    width:auto;
    height:100%;
}

然后在HTML:中

<canvas id="canvas" class="printCanvas" width="2400" height="3300"></canvas>

这应该允许浏览器在打印时使用画布的实际内容，即使画布是按比例缩小的（就像使用图像一样）。

在本例中，画布将适合父对象的高度，前提是父对象已定义高度。您可以使用overflow:auto来获取滚动条。

如果您想在父级中显示50%的画布，只需为画布元素设置height:200%，依此类推

请注意，如果画布缩放过大，您可能会在屏幕上丢失一些细节，但这些细节应该显示在打印上。这可能是由于当一个像素被绘制为小于屏幕上的实际像素时，就会出现亚像素化。

相关文章：