检测HTML5中填充了多少canvas元素

Question

我刚开始使用HTML5，我有一个绘图程序，用户可以通过单击鼠标按钮并像笔一样拖动光标来填充画布。我希望能够弄清楚当前用笔填充的画布百分比。我怎么能这样做？ Here's my current code on Gist谢谢！

Answer 1

您可以使用getImageData（）调用获取<canvas>的所有原始像素值

https://developer.mozilla.org/en-US/docs/DOM/CanvasRenderingContext2D#getImageData%28%29

然后，您在Javascript循环中循环显示此像素数据，并计算所有不属于背景颜色的像素。

画布中填充的百分比是

 completed = filledInPixels / (canvas.width * canvas.height)

请注意getImageData()来电非常慢，您可能只想在一秒钟内调用一次。