帆布獲得填充區域的百分比

Question

我有一個用戶可以繪製的畫布，但我需要檢測填充區域的百分比。用戶在檢查過程中必須繼續繪製。

我已經有了我的畫布，用戶可以在上面畫畫。我在這裏有一個小函數來檢查一些像素是不是空白的，但它太慢了，用戶不能再畫了。

你有什麼想法我可以做到這一點？

UPDATE：

對我的畫布畫我使用lineTo()：

$.fn.drawMouse = function() { var clicked = 0; var start = function(e) { clicked = 1; ctx.beginPath(); x = e.pageX; y = e.pageY; ctx.moveTo(x,y); }; var move = function(e) { if(clicked){ x = e.pageX; y = e.pageY; ctx.lineTo(x,y); ctx.stroke(); } }; var stop = function(e) { clicked = 0; }; $(this).on("mousedown", start); $(this).on("mousemove", move); $(window).on("mouseup", stop); };

Answer 1

，那豈不是更好，如果你增加了一個 「X％的覆蓋」 值的percentFilled每次用戶繪製東西時變量？
例如：
假設您通過創建圓來繪製。你可以計算圓的面積，然後檢查一下，如果一些像素還沒有被填滿。將％（areaOfCircle（以％或可能爲px^2） - areaAlreadyFilled（以％或可能爲px^2））添加到percentFilled變量中，並獲得當前填充的百分比。每次你畫什麼東西，它都會添加繪畫區域。您完全可以完全避免將畫布的覆蓋部分作爲一個整體進行計算。