javascript - how to fill a cell on clicking the grid on canvas in html5 - Stack Overflow

admin管理员组

文章数量:1304960

I want to fill a grid cell on clicking on the particular cell.Here is my code:

 function drawBox()
    {   
        for (var row = 0; row < 14; row ++)
        {
            for (var column = 0; column < 13; column ++)
            {
                var x = column * 40;
                var y = row * 40;
                context.beginPath();
                context.rect(x, y, 40, 40);
                context.fillStyle = "white";
                context.fill();
                context.lineWidth = 3;
                context.strokeStyle = 'black';
                context.stroke();
            }
        }

    }

I want to fill a grid cell on clicking on the particular cell.Here is my code:

 function drawBox()
    {   
        for (var row = 0; row < 14; row ++)
        {
            for (var column = 0; column < 13; column ++)
            {
                var x = column * 40;
                var y = row * 40;
                context.beginPath();
                context.rect(x, y, 40, 40);
                context.fillStyle = "white";
                context.fill();
                context.lineWidth = 3;
                context.strokeStyle = 'black';
                context.stroke();
            }
        }

    }

• javascript
• html
• canvas

Share Improve this question Follow edited Dec 21, 2012 at 12:44 Cerbrus 73k1919 gold badges136136 silver badges150150 bronze badges asked Dec 21, 2012 at 12:22 Vijeta KaraniVijeta Karani 9511 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

I've got a working sample here. Code:

var canvas = document.getElementById("canvas"),
    c = canvas.getContext("2d"),
    boxSize = 40,
    boxes = Math.floor(600 / boxSize);
canvas.addEventListener('click', handleClick);
canvas.addEventListener('mousemove', handleClick);

function drawBox() {
  c.beginPath();
  c.fillStyle = "white";
  c.lineWidth = 3;
  c.strokeStyle = 'black';
  for (var row = 0; row < boxes; row++) {
    for (var column = 0; column < boxes; column++) {
      var x = column * boxSize;
      var y = row * boxSize;
      c.rect(x, y, boxSize, boxSize);
      c.fill();
      c.stroke();
    }
  }
  c.closePath();
}

function handleClick(e) {
  c.fillStyle = "black";

  c.fillRect(Math.floor(e.offsetX / boxSize) * boxSize,
    Math.floor(e.offsetY / boxSize) * boxSize,
    boxSize, boxSize);
}

drawBox();

<canvas id="canvas" width="600px" height="600px"></canvas>

I edited the drawBox() function a bit to increase efficiency, also.

e.offsetX is the mouse coordinate, devide by 40, then Math.floor() this to get the cell number, then multiply by 40 to get the starting coordinate of the cell.

本文标签： javascripthow to fill a cell on clicking the grid on canvas in html5Stack Overflow