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

Question

我使用如下代码在我的 Canvas 上徒手绘制。我需要检查有多少 Canvas 被笔画覆盖。检查它的好方法是什么？我唯一能想到的就是计算鼠标松开事件中具有特定颜色的像素数。但它很蹩脚，因为它很慢......

有什么帮助吗？

$(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;
        }
    });

Answer 1

计算机很快。在绘制时重新计算每帧特定 alpha 上的像素数对我来说似乎很快。在这里自己测试:http://jsfiddle.net/ZC8cB/3/

相关代码:

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));
}

如果这真的太慢了​​，您可以选择每隔一次鼠标移动、每三次鼠标移动等或在间隔计时器上更新该区域。例如，这里有一个稍微修改过的版本，它只更新每十次鼠标移动:http://jsfiddle.net/ZC8cB/4/

如果单帧计数太慢(因为您的计算机或大 Canvas 或两者都很慢)，那么您可以在一帧中获取 ImageData，每个更新帧计算像素的特定部分。