html5-canvas - HTML5で埋められているキャンバス要素の量を検出します

Question

HTML5を使い始めたばかりで、ユーザーがマウスボタンをクリックしてペンのようにカーソルをドラッグすることでキャンバスに入力できるペイントプログラムがあります。現在、キャンバスの何パーセントがペンで埋められているかを把握できるようにしたいと思います。どうすればこれを行うことができますか？これがGistThanksの現在のコードです！

Answer 1

<canvas>getImageData（）呼び出しを使用して、すべての生のピクセル値を取得できます

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

次に、このピクセルデータをJavascriptループでループし、背景色ではないすべてのピクセルをカウントします。

塗りつぶされたキャンバスの割合は

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

getImageData()呼び出しは非常に遅いので、1秒に1回だけ呼び出すことをお勧めします。