滚动 HTML5 Canvas 视口以进行打印答案

【问题标题】：Scrolling HTML5 Canvas viewport for printing滚动 HTML5 Canvas 视口以进行打印
【发布时间】：2013-08-23 07:46:32
【问题描述】：

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

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

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

我试过divoverflow:auto.. 这确实有效，但它没有缩放（仍然滚动一个巨大的版本）。所以基本上我想为浏览器窗口缩放图像，但从大画布上做所有drawing/printing。

【问题讨论】：

【解决方案1】：

对于这种情况，您可以在画布上使用 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% 等等。

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

【讨论】：