滚动HTML5 Canvas视口以进行打印

Question

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

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

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

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

Answer 1

对于这种情况，您可以在画布上使用CSS规则。

<强> ONLINE DEMO HERE

保持像素大小，但将以下规则添加到canvas元素本身（假设画布的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％的画布，只需为canvas元素设置height:200%，依此类推。

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