Setinterval和getImageData

Question

好的，所以我的问题是，我试图得到一个像素碰撞。当我在单个函数调用中使用getImageData时，它可以工作。但是如果我使用Setinterval，它就像getImageData一样成为了一个突破口。在编译getImageData essent之后的代码。为什么会发生这种情况？

如果我这样做，它是有效的：

checkCollision();
function checkCollision()
{
    var imgData = context.getImageData(0, 0, 10, 10);
    context.log(imgData.data);
}

但是如果我这样做了，它就不能工作了，getImageData就像是一个突破：

setInterval(checkCollision, 1000 / FPS);
function checkCollision()
{
    var imgData = context.getImageData(0, 0, 10, 10);
    // Code essent being compiled
    context.log(imgData.data);
}

Answer 1

我在网上找到了一些代码，用来测试你提出的方案。似乎对我很管用

onload事件触发main函数。渲染图像后，我添加了警告消息，以确认是否按照设置的时间间隔调用代码。

在webkit和firefox上测试了代码，它似乎工作得很好。

<script type="text/javascript">

function main() {
    window.setInterval("renderImage();",2000);

}

function renderImage(){
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();

  img.addEventListener('load', function () {
    var x = 0,
      y = 0;

    ctx.drawImage(this, x, y);

    var imgd = ctx.getImageData(x, y, this.width, this.height);
    var imxpxl = imgd.data;
    var len=Math.floor(Math.random()*imxpxl.length+1);
    for (var i = 0; i < len; i += 4) {
      imxpxl[i] = 255 - imxpxl[i]; // red
      imxpxl[i + 1] = 255 - imxpxl[i + 1] // green;
      imxpxl[i + 2] = 255 - imxpxl[i + 2] // blue;
      // i+3 is alpha
    }
    ctx.putImageData(imgd, x, y);
    javascript: console.log(imgd.data);
},
  false);

  img.src = './logo.png';

}

</script>

Answer 2

好了，这是我的一个小总结。如果脚本不是通过服务器编译的，它将不会在Firefox或internet Explorer等正常环境中工作。Safari和Chrome我现在不想，我不想试试这个。但是如果你使用Firefox或Explorer，它会给你一个安全错误“code："1000。如果您组合使用getImageData和setInterval，则需要在服务器上编译代码。我现在使用的是"WampServer“(可以是谷歌的)，它只是暂时在你的计算机上创建一个虚拟服务器。我还发布了另一个主题，"Kyle Jones“告诉我在脚本中加入以下内容：

netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead")；

忽略这个错误，但它打破了这个错误。不是真正的突破，而是getImageData背后的代码已经被编译了。所以要做的事情就是在虚拟或真实的服务器上编译你的代码，看看它是否工作。

HTML5 Javascript完美像素碰撞代码：

var FPS = 30；

setInterval(onEnterFrame，1000 / FPS)；

函数onEnterFrame()

{

collisionCheck()；

}

函数collisionCheck() {

//获取像素数据

var imgData = context2D.getImageData(x_position，y_position，1，1)；

ImgData.data imgPixelData = var；

//看看有没有碰撞(3是alpha通道(RGBA))

if (imgPixelData3 >= 1)

{

 if (window.console) 

 {

        console.log("You go a Hit!!");

 } 

}

}

当它在服务器上运行时，你会遇到像素冲突。

我在互联网上到处搜索，没有找到任何关于这方面的好的指导，所以我希望这能帮助到一些人：)。