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

标签 javascript animation html canvas

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

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

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

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

有人能解决这个问题吗?

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

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

最佳答案

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

关于javascript - 如何在 HTML5 Canvas 上进行正确的边界检查?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3122770/

相关文章:

javascript - 网络 ERP 系统。打印系统发票,无需编辑、下载

javascript - 在每个列表中向下滑动

javascript - Fullpage.js 中的 CSS3 动画

html - 边界图像,边界半径

javascript - bean.getValue() 只提取部分值而不是全部值

javascript - 通过chrome扩展从网页中提取数据

javascript - 使用python从url中提取javascript信息

jquery函数需要先取消其他函数

html - 如何仅使用 CSS 和 HTML 来约束动画?

javascript - 根据自定义属性过滤 SELECT 选项