Question

我试图制作一个网格，当点击一个正方形时它会变成绿色，但是我一直在向我的阵列添加对象时遇到问题，如果预设它们显示正常但是如果我点击鼠标就添加它们他们不会渲染。

＆＃13;

var canvas = document.getElementById("ctx");
var ctx = canvas.getContext("2d");
var Img = {};
Img.tileMap = new Image();
Img.tileMap.src = 'TitleMap.png';

WIDTH = 1536;
HEIGHT = 896;

currentImage = [32, 32];

ctx.strokeStyle = '#ffffff';

function createGrid() {
  ctx.strokeStyle = '#ffffff'
  for (var i = 0; i < WIDTH; i++) {
    ctx.beginPath();
    ctx.moveTo(i * 32, 0);
    ctx.lineTo(i * 32, HEIGHT);
    ctx.stroke();
  }

  for (var i = 0; i < HEIGHT; i++) {
    ctx.beginPath();
    ctx.moveTo(0, i * 32);
    ctx.lineTo(1536, i * 32);
    ctx.stroke();
  }
}


var tiles = [{
  x: 1,
  y: 1
}];
var mousePos = null;

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: Math.round((evt.clientX - rect.left) / (rect.right - rect.left) *
      canvas.width),
    y: Math.round((evt.clientY - rect.top) / (rect.bottom - rect.top) *
      canvas.height)
  };
}

canvas.addEventListener('mousemove', function(evt) {
  mousePos = getMousePos(canvas, evt);
}, false);

document.body.onmousedown = function() {
  pos = {
    x: Math.floor(mousePos.x / 32),
    y: Math.floor(mousePos.y / 32),
  };

  tiles.push(pos);

}

function drawTiles() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  createGrid();
  if (tiles.length) {
    for (var id in tiles) {
      ctx.fillStyle = "#42f456";
      ctx.strokeStyle = '#42f456';
      ctx.fillRect(tiles[id].x, tiles[id].y, 32, 32);

    }
  }
}

setInterval(drawTiles(), 1000 / 30);

＆＃13;

<center>
  <canvas id="ctx" width="1536" height="896" style="border:1px solid #ffffff;">
</canvas>
</center>

＆＃13;

Answer 1

您正在执行setInterval错误 - 您希望传递函数，而不是调用它 - 否则返回的函数是传递给setInterval的函数。

＆＃13;

<body bgcolor="#000000">


<center><canvas id="ctx" width="1536" height="896" style="border:1px solid #ffffff;">
</canvas></center>
<script>
    var canvas = document.getElementById("ctx");
    var ctx = canvas.getContext("2d");
    var Img = {};
    Img.tileMap = new Image();
    Img.tileMap.src = 'TitleMap.png';

    WIDTH = 1536;
    HEIGHT = 896;

    currentImage = [32,32];

    ctx.strokeStyle = '#ffffff';

    function createGrid(){
        ctx.strokeStyle = '#ffffff'
        for (var i = 0 ; i < WIDTH; i++){
            ctx.beginPath();
            ctx.moveTo(i*32,0);
            ctx.lineTo(i*32,HEIGHT);
            ctx.stroke();
        }

        for (var i = 0 ; i < HEIGHT; i++){
            ctx.beginPath();
            ctx.moveTo(0,i*32);
            ctx.lineTo(1536,i*32);
            ctx.stroke();
        }
    }


    var tiles = [{x:1,y:1}];
    var mousePos = null;

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
        x: Math.round((evt.clientX-rect.left)/(rect.right-rect.left)*canvas.width),
        y: Math.round((evt.clientY-rect.top)/(rect.bottom-rect.top)*canvas.height)
        };
      }

     canvas.addEventListener('mousemove', function(evt) {
        mousePos = getMousePos(canvas, evt);
      }, false);

    document.body.onmousedown = function() { 
        pos = {
            x:Math.floor(mousePos.x/32), 
            y:Math.floor(mousePos.y/32),
        };

        tiles.push(pos);

    }

    function drawTiles(){
        ctx.clearRect(0,0,WIDTH,HEIGHT);
        createGrid();
        if(tiles.length){
            for (var id in tiles){
                ctx.fillStyle = "#42f456";
                ctx.strokeStyle = '#42f456';
                ctx.fillRect(tiles[id].x,tiles[id].y,32,32);

            }
        }
    }

    setInterval(drawTiles,1000/30);



</script>
</body>

＆＃13;

此外，还有一些快速说明 - 您使用var语句快速放松 - 确保如果您不希望变量为全局变量，请使用var。并且还要注意for...in循环用于迭代对象键 - 迭代数组，使用标准for循环。最后，考虑是否需要setInterval - 似乎只需在将新职位推入drawTiles后在onmousedown中调用tiles就足够了阵列。

HTML5循环的对象数组

1 个答案: