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

Question

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

Answer 1

您可以获得<canvas>使用 getImageData() 调用的所有原始像素值

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

然后你在 Javascript 循环中遍历这个像素数据并计算所有不是背景颜色的像素。

填充画布的百分比是

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

请注意，getImageData()调用速度非常慢，您可能只想每秒调用一次。