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

我用下面的代码在我的画布上绘制徒手的笔触.我需要检查笔画覆盖了多少画布.什么是检查的好方法？我能想到的唯一一件事就是计算鼠标上移事件中具有特定颜色的像素数.但这很la脚,因为它很慢…

有什么帮助吗？

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

解决方法:

电脑速度很快.在绘制时,重新计算每帧特定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/

而且,如果一帧计数太慢(因为计算机速度慢或画布太长,或两者兼而有之),则可以在一帧中获取ImageData,并且每个更新帧都会计数像素的特定部分.

相关推荐