Javascript 滚动HTML5画布视口以进行打印

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

唯一不会扭曲文本的画布宽度是

300dpi

或

2400x3300

画布。这对打印效果很好，但它在屏幕上明显很大

我希望用户在左侧有一个缩小版的画布，适合父容器的高度

100%

，并带有滚动条以防溢出

---

我尝试了

div

overflow:auto。。这确实有效，但它没有缩放（仍然滚动一个巨大的版本）。因此，基本上我想缩放浏览器窗口的图像，但从大画布上绘制/打印所有

图像
 对于这个场景，您可以在画布上使用CSS规则


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

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

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

然后在HTML中：

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



这应该允许浏览器在打印时使用画布的实际内容，即使画布被缩小（如使用图像）

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

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

请注意，如果画布比例过大，屏幕上可能会出现一些细节，但这些细节应显示在打印上。这可能是由于当一个像素在屏幕上被绘制为小于一个实际像素时，会产生子像素

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