Question

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

如果我这样做了它的作品：

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

但是，如果我这样做它不起作用，getImageData就像一个Break：

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

Oke所以我点了一下wat的总结。如果没有通过服务器编译，该脚本将无法在Firefox或Internet Explorer等常规环境中运行。 Safari和Chrome我现在不想尝试这个。但是，如果您使用Firefox或资源管理器，它将为您提供安全错误“代码：”1000。如果组合使用getImageData和setInterval，则需要在服务器上编译代码。我现在使用的是“WampServer”（可以是google't），它只是暂时在你的计算机上创建一个虚拟服务器。我还发布了另一个主题，其中“凯尔琼斯”告诉我把它放在剧本中：

netscape.security.PrivilegeManager.enablePrivilege（ “UniversalBrowserRead”）;

要忽略错误，但它突破了错误。不是真正的休息，但getImageData背后的代码已经被编译了。所以要做的就是在虚拟或真实服务器上编译代码以查看它是否有效。

HTML5 Javascript Perfect Pixel碰撞代码：

var FPS = 30;

setInterval（onEnterFrame，1000 / FPS）;

function onEnterFrame（）

{

collisionCheck（）;

}

function collisionCheck（） {

//获取像素数据

var imgData = context2D.getImageData（x_position，y_position，1,1）;

var imgPixelData = imgData.data;

//查看是否存在任何碰撞（3是alpha通道（RGBA））

if（imgPixelData [3]＆gt; = 1）

{

 if (window.console) 

 {

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

 }

}

这就是它在服务器上运行，你得到了像素冲突。

我在互联网上搜索了一下，并且dident发现任何网站都有关于此的良好指示，所以我希望这可以帮助某人：）。

Setinterval和getImageData

2 个答案: