帆布获得填充区域的百分比

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变量中，并获得当前填充的百分比。每次你画什么东西，它都会添加绘画区域。您完全可以完全避免将画布的覆盖部分作为一个整体进行计算。