javascript - 一旦我再添加 1 个变量，函数就会停止工作？基于像素颜色为图像添加边界

Question

我一直在寻找一种方法来为我的迷宫游戏添加边界。

前段时间在这里发帖后，我注意到您可以从光标中获取像素/图像数据，然后如果该像素是某种颜色则告诉绘制函数不要运行。

考虑到这一点，我修改了我的初始代码

<script>
 var el = document.getElementById('can1');
 var ctx = el.getContext('2d');
 var isDrawing;
 var can = document.getElementById('can1');

 el.onmousedown = function(e) {
    isDrawing = true;
    ctx.strokeStyle = "green";
    ctx.lineWidth = 4;
    ctx.lineJoin = ctx.lineCap = 'round';
    ctx.moveTo(e.offsetX, e.offsetY);
}

el.onmousemove = function(e) {
  if (isDrawing) {
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
  }
};

el.onmouseup = function() {
  isDrawing = false;
};
</script>

对此(注意这是一个片段)

<script>
 var el = document.getElementById('can1');
 var ctx = el.getContext('2d');
 var isDrawing;
 var can = document.getElementById('can1');
 var rgbColorData = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data; 

 el.onmousedown = function(e) {
  if (rgbColorData[0] == 255) {
  isDrawing = true;
  ctx.strokeStyle = "green";
  ctx.lineWidth = 4;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(e.offsetX, e.offsetY);
}}

似乎只要我向初始代码添加任何变量，整个绘图功能就会停止工作。我通过添加“var random = holo;”来测试这个由于某种原因，整个事情停止了。

对于任何想知道图像是用下面的代码完成的人

<script>
    var img2 = new Image();
    function test2() {
    can.width = img2.width;
    can.height = img2.height;
    ctx.drawImage(img2, 0, 0);
}
img2.src = 'http://www.hereandabove.com/cgi-bin/maze?30+30+20+5+5+0+0+0+255+255+255.jpg';
</script>

Answer 1

var rgbColorData = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;

那时没有 e 变量。

 el.onmousedown = function(e) {

...在这里。