Riding an arena on canvas

Question

Riding an arena on canvas

Navigation

#1 by (3 votes)

5

I'm building an arena using resources of HTML/JS with canvas .

I have the following code:

function montarArena() {
    var canvas;
    var heightCanvas = 498;
    var widthCanvas = 598;
    var qtdLinhas = $('#larguraCampo').val();
    var qtdColunas = $('#alturaCampo').val();
    var tamanhoLinha = widthCanvas / qtdLinhas;
    var tamanhoColuna = heightCanvas / qtdColunas;

    canvas = document.getElementById('imageView');
    context = canvas.getContext('2d');
    context.strokeStyle = '#000000';
    context.fillStyle = '#fff';
    context.clearRect(1, 1, widthCanvas, heightCanvas);

    console.log("tamColuna: " + tamanhoColuna + " tamLinha: " + tamanhoLinha + " QtdColunas: " + qtdColunas + " QtdLinhas: " + qtdLinhas);

    for (i = 0; i <= qtdLinhas; i++) {
      for (j = 0; j <= qtdColunas; j++) {
        context.strokeRect(j, i, tamanhoLinha * i, tamanhoColuna * j);
      }
    }
  
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><inputtype="range" id="larguraCampo" value="1" min="1" max="25" onchange="montarArena()" />
<input type="range" id="alturaCampo" value="1" min="1" max="25" onchange="montarArena()" />
<br/><br/><br/><br/><br/><br/>
<canvas id="imageView" width="600" height="500"></canvas>

As the number of lines is increased, the arena is getting crooked .... As follows:

Ineedittofit,justlikeatableitself:

I'm not realizing where I'm going wrong.

javascript html canvas

asked by anonymous 28.07.2016 / 07:28

1 answer

Operation with lists of very large sizes VueJS: how to create a condition from one v-for to another

score 3 · Accepted Answer

You have changed the logic of the arguments, it should be

context.strokeRect(tamanhoLinha * j, tamanhoColuna * i, tamanhoLinha, tamanhoColuna);

In the way you had it, you drew N squares all starting from the upper left corner, at the point of co-ordinates [i, j] , which means that the first square began in [0, 0] , the second in [1, 1] , etc ... and thus lagged / displaced. What you were varying was the area of each square.

Changing as I suggest, square cubes all with the same area and the corner of the square repositioned for [tamanhoLinha * j, tamanhoColuna * i] .