带有滚动条的 HTML 画布答案

【问题标题】：HTML canvas with scrollbar带有滚动条的 HTML 画布
【发布时间】：2018-06-11 17:28:37
【问题描述】：

我在不等宽的画布上绘制图形。每个画布都可以有自己的滚动条吗？我试图将所有画布放在一个 div 中并指定一个最大宽度，但它不起作用。是否有可能所有画布在页面上的可见宽度为 500 像素，并且每个画布都有其滚动条来查看画布的整个宽度。

谢谢。

【问题讨论】：

【解决方案1】：

指定画布的总宽度，然后将其包裹在一个 div 中。将 div 设置为 overflow: scroll 并设置 500px 宽度。然后，您应该有滚动条，允许您滚动并查看画布的隐藏部分。对所有画布重复此操作。

<div style="max-height: 256px;max-width:256px;overflow: scroll;">
          <canvas width="512px" height="512px"></canvas>
</div>

【讨论】：

但我假设这会创建一个全尺寸的画布后备存储位图。对于大多数用例来说是不可接受的。
它适用于任何不需要画布动画的用例。如果您正在生成图形或大图像，则加载到画布中并具有滚动条应该非常好。如果您正在创建动画，您可能只想绘制可见的动画部分以节省处理时间。