如何在HTML5画布上进行正确的边界检查绘图？

Question

3

在 Firefox 中绘制画布时，如果您尝试在画布范围之外绘制或移动到一个点，将会抛出一个错误（这是直接从 Firebug 复制粘贴的）：

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

其他浏览器不会报错。这对绘图方法（lineTo、arc等）以及图像绘制都适用。在绘制之前，使用画布的宽度和高度进行快速边界检查很容易，但是如何绘制某些部分呢？

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

有没有解决这个问题的方法？我想到的一个方法是使用一个大的“世界缓冲”画布，然后从中复制到显示画布。另一个方法是将每个对象绘制在缓冲画布的中心，然后将新绘制的像素复制到显示画布的正确位置。

人们是如何解决这个问题的呢？

- Andrew

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ricardo Marimon · Accepted Answer

画布将图像裁剪到其视图的边界矩形。您在该边界框外绘制时不应出现问题。它将不会显示在您的绘画中。请发布特定示例以查看是否能够复制错误。