0

我一直在玩一个非常简单的基于 HTML5/Canvas 的绘图应用程序,仅用于浏览器。我将其设置为概念验证,以使用不同的程序化绘图效果等。但是,当我尝试从画布 2d 上下文中获取 ImageData 时,遇到了一个问题,即 SecurityError。

现在,我了解跨浏览器内容以及在具有本地内容的网络服务器上运行的所有安全问题等等。这不是我的问题。我没有使用任何图像。更奇怪的是,我可以在代码中的某些地方获取 ImageData,但不能在其他地方获取。具体来说,不是在我想要的函数内。

这是我的代码的一个分支:http: //jsfiddle.net/grimertop90/77Z42/ 随意玩耍,并尝试在画布上绘图。

(注意:我一直在 Chrome 中开发,它运行良好,但我只是尝试在 Firefox 中运行它,它似乎有问题。出于我的目的,请在 Chrome 中查看。)

如果您查看 JavaScript,您应该看到标记为“Case 1”、“Case 2”和“Case 3”的三个点。这是我的代码中我试图抓取画布的 ImageData 的三个点。案例 1 和 3 有效;案例2,重要的,没有。情况 1 是在初始化期间。案例 3 是在用户单击按钮时。情况 2,即损坏的情况,在画布上绘制了一定数量的点时触发。

我不知道这个问题可能是什么,特别是因为它在 3 个地方中的 2 个工作。

4

1 回答 1

1

您的代码工作正常,您唯一的问题是arcSketch调用中缺少参数。目前您有:

if (points.length >= 100) { arcSketch(); }

只需将其更改为

if (points.length >= 100) { arcSketch(x,y); }

您试图调用ctx.getImageData(Nan, Nan, 200, 200)哪个抛出错误。你可以看到它在这里工作

于 2012-09-20T15:15:15.283 回答