我有一个大小为1024x768的画布元素，我绘制了一个非常大的图像，让我们说宽度＆gt;＆gt; 1024和高度＆gt;＆gt; 768.可以使用普通滚动条滚动图像，以便完全看到。
用户可以单击画布将顶点添加到多边形：每次添加顶点时，都会绘制从新顶点到鼠标光标的线。 每个鼠标移动到画布上都会更新画布，以便将此行从顶点重绘到新的鼠标光标位置。
由于图像非常大，重绘非常慢，所以我想重新绘制当前可见的图像块，或者更好的是，重新绘制＆＃34;子块＆＃34;受此线影响。
问题是：如何根据用户滚动图像的程度检测上下文可见部分的当前topLeft和bottomRight？基本上我想添加对自定义视口的支持，但我似乎无法利用scolling信息来确定要从原始图像裁剪的块的边界框。
答案 0 :(得分：1)
我实际上有一个canvasDiv容器，它是真正的可滚动元素，而不是画布本身。
这意味着您的画布是完整尺寸，并且您将容器div用作一种＆＃34;框架＆＃34;。这非常糟糕，因为画布像素非常昂贵，特别是如果你甚至不使用它们（它们不在视口之外）。
这里最好的方法是将画布大小设置为容器大小，并使用drawImage函数来控制滚动。原始图像将放置在屏幕外画布或图像元素上。我可以用这种方式保证你有更好的表现。
您将丢失滚动条，这是不利的一面。
答案 1 :(得分：1)
我假设您通过在较小的div中包含较大的canvas元素来创建滚动条。
相反，您可以通过以下方式模仿此设置：
拥有容器div大小的画布。
添加2个输入类型=范围控件以充当垂直＆amp;水平滚动条（或者如果你想要花哨的话，可以获取jqueryUI滚动条插件）。
然后，您可以使用context.drawImage的剪切版本仅绘制范围控件指定的图像部分。 drawImage的剪切版本如下所示：drawImage（myLargeImage，clipX，clipY，clipWidth，clipHeight，0,0，canvas.width，canvas.height）