Javascript 这种计算画布元素中非白色像素的方法有什么问题？_Javascript_Html_Canvas

Javascript 这种计算画布元素中非白色像素的方法有什么问题？

javascript html canvas

Javascript 这种计算画布元素中非白色像素的方法有什么问题？,javascript,html,canvas,Javascript,Html,Canvas,我在玩帆布。我写了这个小片段，我可以在画布上画一些东西，按run键，让它计算像素数。只是计数不起作用。具体来说，context.getImageData（0,0，canvas.width，canvas.height）的每个元素的数据都是0。我在之前的一篇文章中看到了类似的问题，但在这种情况下，这是因为代码在加载图像之前运行。在本例中，我已经渲染了图像，可以在屏幕上看到它。我将感谢任何帮助 <!DOCTYPE html> <html> <body> <d

我在玩帆布。我写了这个小片段，我可以在画布上画一些东西，按run键，让它计算像素数。只是计数不起作用。具体来说，context.getImageData（0,0，canvas.width，canvas.height）的每个元素的数据都是0。我在之前的一篇文章中看到了类似的问题，但在这种情况下，这是因为代码在加载图像之前运行。在本例中，我已经渲染了图像，可以在屏幕上看到它。我将感谢任何帮助

<!DOCTYPE html>
<html>
<body>

<div>
<canvas id="myCanvas" width="100" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<button id="runButton">Run</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
      function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }

      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');


      function drawPixel(x,y,r,g,b)
      {
        var id = context.createImageData(1,1);
       var d  = id.data;
       d[0]   = r;
       d[1]   = g;
       d[2]   = b;
       d[3]   = 255;
       context.putImageData( id, x, y );  
      } 

        var clicking = false;



    $(document).mouseup(function(){
        clicking = false;
    })

      canvas.addEventListener('mousedown', function(evt) {
        clicking = true;
        var p = getMousePos(canvas, evt);
        drawPixel(p.x,p.y,0,0,0);
      }, false);

      canvas.addEventListener('mousemove', function(evt) {
        if(clicking == false) return;
        var p = getMousePos(canvas, evt);
        drawPixel(p.x,p.y,0,0,0);
      }, false);

      $("#runButton").click(countPixels);

      function countPixels()
      {
        var nAlive = 0;
        var p = context.getImageData(0,0,canvas.width,canvas.height).data;
        for (var y = 0, i =0 ; y < canvas.height; y++)
            for (var x = 0; x < canvas.width; x++, i+=4)
            {
                if (p[i] != 255 || p[i + 1] != 255 || p[i + 2] != 255) //Not white
                {
                    nAlive++;
                }
            }

        alert(nAlive);
      }

</script>

</body>
</html>


您的浏览器不支持HTML5画布标记。
跑
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
函数绘制像素（x、y、r、g、b）
{
var id=context.createImageData（1,1）；
var d=id数据；
d[0]=r；
d[1]=g；
d[2]=b；
d[3]=255；
putImageData（id，x，y）；
} 
var=false；
$（文档）.mouseup（函数（）{
点击=假；
})
canvas.addEventListener（'mousedown'，函数（evt）{
单击=真；
var p=getMousePos（画布，evt）；
绘制像素（p.x，p.y，0,0,0）；
}，假）；
canvas.addEventListener（'mousemove'，函数（evt）{
if（clicking==false）返回；
var p=getMousePos（画布，evt）；
绘制像素（p.x，p.y，0,0,0）；
}，假）；
$（“#运行按钮”）。单击（计数像素）；
函数countPixels（）
{
变量=0；
var p=context.getImageData（0,0，canvas.width，canvas.height）；
对于（变量y=0，i=0；y

画布最初只是黑色透明像素，而像素图形使用黑色不透明像素，因此，当您计算每个非白色像素时，在这种情况下，所有像素都将被计算，从而使结果正确

要修复此问题，您需要先用白色填充整个画布。您现在看到的白色是画布的背景：

context.fillStyle ="#fff";
context.fillRect(0, 0, canvas.width, canvas.height);

或者，如果不想先填充，可以使用像素的索引3来计算不透明像素：

if (p[i+3]) //a pixel
{
   nAlive++;
}

谢谢，这正是我需要知道的！