如何对 HTML5 画布上的绘图进行适当的边界检查？

Question

在 Firefox 中的画布上绘图时，如果您尝试在画布边界之外的某个点进行绘制或移动，则会引发错误（这是直接从 Firebug 复制/粘贴的）：

An invalid or illegal string was specified" code: "12

其他浏览器不会抛出错误。这既适用于绘图方法（lineTo、arc 等），也适用于图像绘制。在绘制之前使用画布的宽度和高度进行快速边界检查很容易，但是绘制部分内容呢？

例如，假设您有一个圆，由中心点和半径定义，并使用 arc() 绘制。如果您进行边界检查，中心可能不在画布上，而圆的一部分在技术上应该仍然可见。因此，圆要么完全绘制，要么根本不绘制：如果中心点不在画布上，则无法只绘制圆的一部分。

有人可以解决这个问题吗？

我想到的一个是使用大型“世界缓冲区”画布，然后将其复制到显示画布。另一个可能是在缓冲区画布的中心绘制每个对象，然后将新绘制的像素复制到显示画布的适当位置。

人们做了什么来解决这个问题？

Answer 1

画布将图像裁剪到其视图的边界矩形。在这个边界框之外绘制应该没有问题。它不会出现在您的绘图上。发布一个特定的示例，看看我们是否可以重现错误。