html5-canvas - 检测 HTML5 中 Canvas 元素的填充量

Question

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

Answer 1

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

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

然后，您在 Javascript 循环中循环遍历此像素数据，并对所有不属于背景颜色的像素进行计数。

Canvas 的填充百分比为

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

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