HTML5 画布 clearRect 计数剩余像素答案

【问题标题】：HTML5 canvas clearRect count remaining pixelHTML5 画布 clearRect 计数剩余像素
【发布时间】：2014-06-02 11:58:45
【问题描述】：

我在我的 200x200px 画布元素上使用鼠标移动时使用 clearRect 删除了一些像素。现在，我想检查是否没有剩余像素要删除（所有 40.000px 都已删除），然后重置或加载新图像。

canvas.onmousemove = function(e) {
  x = e.clientX - e.target.offsetLeft;
  y = e.clientY - e.target.offsetTop;
  context.clearRect(x, y, 20, 20);
}

【问题讨论】：

你尝试了什么？曾经是一个问题，当问题的质量很重要时会被问到。
@GameAlchemist 如果你没有注意到，问题已经解决了。我建议你阅读这篇文章：blog.stackoverflow.com/2011/06/optimizing-for-pearls-not-sand

标签： javascript html canvas html5-canvas

【解决方案1】：

有两种方法可以检测画布是否为空白：

比较数据-uris

在开始绘制之前，首先从空白画布中抓取一个字符串。如果你改变了画布的大小，你也需要更新这个字符串。

var blankCanvas = canvas.toDataURL('image/bmp');

这将在支持此格式的浏览器中获得 BMP（未压缩）图像，否则默认为 PNG。获取未压缩的图像会增加内存使用，但在获取字符串时也会提高性能（但如果比较大的话，会减慢速度）。

然后在你想比较的时候做同样的事情：

var currentCanvas = canvas.toDataURL('image/bmp');

if (currentCanvas === blankCanvas) {
    /* it's empty */
}

比较像素

唯一的方法是遍历像素以查看是否所有值都是黑色透明的。

这是一种方法：每次需要检查时调用此方法（通常在 mouseup 事件上）-

function hasPixels() {

    var idata = context.getImageData(0, 0, canvas.width, canvas.height),
        buffer = new Uint32Array(idata.data.buffer),  // use 32-bit buffer
        len = buffer.length,
        i;

    for(; i < len; i++) {
        if (buffer[i] !== 0) return true;
    }

    return false;
}

如果画布上还有任何像素，这将返回 true。

32 位缓冲区允许我们一次检查一个完整的像素，并且比比较每个组件的性能更好。

注意事项

这两种方法都需要与图像相关的CORS requirements 才能正常工作。这是浏览器中的一种安全机制，可防止从画布跨域提取像素。

哪种方法更快取决于各种因素，例如画布大小、浏览器实现等。您需要检查您的方案。我可能会在第二种解决方案中添加一枚硬币以供一般使用以及低资源消耗的好处。但对于 200x200 的画布，两者都应该可以正常工作。

【讨论】：