javascript - 检查 Canvas 段的透明度

Question

我有一 block Canvas 。 Canvas 宽 w 像素，高 h 像素。

Canvas 上有一个图像。

(a,b) 和 (c,d) 两点之间是否存在不透明度小于 1.0 的像素(或更多)？

无论有一个(半)透明像素还是有一百个，都没有关系。一个简单的 true 或 false 值就足够了。

性能并不重要(因为每次加载页面时只会运行一次，大约 500k 像素)。

如何发现？

Answer 1

基于Bresenham algorithm in Javascript

https://jsfiddle.net/f5b8o3hn/

function line(x0, y0, x1, y1){
   var dx = Math.abs(x1-x0);
   var dy = Math.abs(y1-y0);
   var sx = (x0 < x1) ? 1 : -1;
   var sy = (y0 < y1) ? 1 : -1;
   var err = dx-dy;

   while(x0!=x1 || y0!=y1){

     var pixeldata = context.getImageData(x0, y0, 1, 1);
     var data = pixeldata.data;
     for (var i = 0, n = data.length; i < n; i += 4) {
        if (data[i + 3] < 255) {
          console.log(true); //true 
          break;
        }
        console.log(data[i + 3]);
     }

     var e2 = 2*err;
     if (e2 >-dy){ err -= dy; x0  += sx; }
     if (e2 < dx){ err += dx; y0  += sy; }
   }
}

//pixeldata[0]   Value of red in decimal (int between 0 and 255)
//pixeldata[i+1] Value of green in decimal (int between 0 and 255)
//pixeldata[i+2] Value of blue in decimal (int between 0 and 255)
//pixeldata[i+3] Alpha Value (int between 0 and 255)