Javascript 如何计算绘制区域的面积？

我用如下代码在画布上绘制徒手笔划。我需要检查画布上有多少画满了笔画。什么是检查的好方法？我能想到的唯一一件事就是计算鼠标向上运动时具有特定颜色的像素数。但它是跛脚的，因为它是缓慢的

有什么帮助吗

$(document).ready(function(){
    var draw = false;
    var x_prev = null, y_prev = null;
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.mousedown(function(e){
        draw = true;
        x_prev = e.pageX - this.offsetLeft;
        y_prev = e.pageY - this.offsetTop;
    });
    window.mouseup(function(){draw=false});
    canvas.mousemove(function(e){
        if(draw){
            context.beginPath();
            context.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
            context.lineTo(x_prev, y_prev);
            context.stroke();
            context.closePath();
            x_prev = e.pageX - this.offsetLeft;
            y_prev = e.pageY - this.offsetTop;
        }
    });

---

量化面积到线宽大小的正方形，并计算绘制过程中遇到的唯一正方形的数量

var thickness = 4
var height = ..
var width = ..
var drawn = []
var covered = 0;

canvas.mousemove(function(e) {

    var x = e.pageX - this.ofsetLeft;
    var y = e.pageY - this.offsetTop;
    x = parseInt( x / width ) * ( width / thickness )
    y = parseInt( y / height ) * ( height / thickness )
    id = x + y * parseInt(thickness / width)
    if ( !drawn[ id ] ) {
       drawn[ id ] = 1;
       covered++;
    }

}

通过将覆盖的正方形除以总正方形数，可以获得以百分比表示的绘制面积

var a = covered / ((width / thickness) * (height / thickness))

计算机很快。在我看来，在绘图时，重新计算每帧特定alpha上的像素数似乎非常快。在这里自己测试一下：

相关代码：

var w = canvas.attr('width'),
    h = canvas.attr('height'),
    area = w * h;

function updateArea() {
  var data = context.getImageData(0, 0, w, h).data;
  for (var ct=0, i=3, len=data.length; i<len; i+=4) if (data[i]>50) ct++;
  $fill.html(ct);
  $pct.html((100 * ct / area).toFixed(2));
}

var w=canvas.attr（'width'），
h=canvas.attr（“高度”），
面积=w*h；
函数updateArea（）{
var data=context.getImageData（0,0,w,h）.data；
对于（var ct=0，i=3，len=data.length；i50）ct++；
$fill.html（ct）；
$pct.html（（100*ct/面积）.toFixed（2））；
}

如果这真的太慢了，你可以选择每隔一次鼠标移动，每三次鼠标移动，等等，或者在间隔计时器上更新区域。例如，这里有一个稍微修改过的版本，它只会每十次mousemove更新一次：

---

如果单帧计数太慢，因为你有一台速度慢的计算机或巨大的画布，或者两者兼而有之，那么你可以在一帧中提取图像数据，每个更新帧计数像素的特定部分。

线条有多粗？另外，您是否考虑消除混叠？任意厚。但是厚度是硬编码的。我不太关心抗锯齿，我只需要一些能给我一个很好的近似值的东西。这是一个游戏，我不需要高精度。你将如何处理线重叠？您可以只使用

area+=厚度*sqrt（（e.pageX-this.offsetLeft-x_prev）^2+（e.pageY-this.offsetTop-y_prev）^2），但这不包括相交的线。对，这就是问题：）我可以计算出每个线段的面积，给定其厚度，但如何有效地计算所有我不知道的线…您可能需要做类似的操作。谢谢您的回答，你能解释一下这个代码吗？它很简单，它保持一个网格，用来跟踪鼠标在绘图时移动了多少个正方形（厚度定义大小）。有盖的计数器会计算绘制的正方形的数量。谢谢。这对我来说是可行的，除非鼠标移动太快，并且没有为轨迹中的所有点调用事件处理程序（这就是为什么我在代码中使用moveTo（）和lineTo（））。对，在这些情况下，你只需要外推一些以保持估计更准确。我最后也做了同样的事情，只是在“鼠标向上”事件上扫描画布。