javascript - 如何在 HTML5 Canvas 上进行正确的边界检查？

Question

在 Firefox 中的 Canvas 上绘图时，如果您尝试绘制或移动到 Canvas 边界之外的点，将抛出错误(这是直接从 Firebug 复制/粘贴的):

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

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

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

有人能解决这个问题吗？

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

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

Answer 1

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