javascript - 滚动 HTML5 Canvas 视口以进行打印

Question

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

唯一不会扭曲文本的画布宽度是300dpi或2400x3300画布。这适用于打印，但它在屏幕上显然很大。

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

我已经尝试过div溢出：自动.. 这确实有效，但它没有缩放（仍然滚动一个巨大的版本）。所以基本上我想为浏览器窗口缩放图像，但从drawing/printing大画布上做所有事情。

score 0 · Accepted Answer

对于这种情况，您可以在画布上使用 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%为画布元素设置，依此类推。

请注意，如果画布缩放很多，您可能会在屏幕上丢失一些细节，但这些应该会显示在打印件上。这将是由于子像素化在像素被绘制为小于屏幕上的实际像素时启动。

1 回答 1