как добавить цифры из массива чисел в fillText на canvas

Question

На холсте создал массив квадратов. Добавил массив цифр. Как добавить числовые значения из массива чисел. Чтобы на квадратах отображались цифры по порядку. Мне нужно, чтобы цифры из массива пронумеровали каждый квадрат. А у меня весь массив отображается в каждам квадрате. Вот мой код.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>javascript Canvas Array_Square</title>
  <style>
    body {
      text-align: center;
    }
    
    #canvas {
      border: 2px solid green;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <h1>javascript Canvas Array_Square</h1>
  <canvas id="mycanvas"></canvas>

  <script>
    const canvas = document.getElementById('mycanvas');
    const ctx = canvas.getContext("2d");
    const CELL_SIZE = 100;
    const ROWS = 4,
      COLS = 4;
    const CELL_COUNT = ROWS * COLS;
    var cellCol = "green";
    //Позиции на доске
    const boardPosition = {
      x: 0,
      y: 0,
      w: COLS * CELL_SIZE,
      h: ROWS * CELL_SIZE
    };
    canvas.width = boardPosition.x + boardPosition.w;
    canvas.height = boardPosition.y + boardPosition.h;
    const cells = [];
    var cellIdx = 0;
    while (cellIdx < CELL_COUNT) {
      drawCell(cellIdx++);
    }

    function drawCell(cellIdx) {
      const val = cells[cellIdx];
      const x = (cellIdx % COLS) * CELL_SIZE;
      const y = (cellIdx / COLS | 0) * CELL_SIZE;

      ctx.font = "60px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillStyle = "blue";
      ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
      ctx.fillStyle = cellCol;
      ctx.fillRect(x + 5, y + 5, CELL_SIZE - 10, CELL_SIZE - 10);
      ctx.fillStyle = "white"

      const a = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8];
      a.forEach((v, i) => {
        <!-- const x = 10 + ((i % 5) * 25) -->
        <!-- const y = 50  + (50 * Math.trunc(i / 5)) -->
        <!-- ctx.fillText(v, x, y) -->
        ctx.fillText(v, x + CELL_SIZE * 0.5, y + CELL_SIZE * 0.5);
      })
      <!-- ctx.fillText(val, x + CELL_SIZE * 0.5, y + CELL_SIZE * 0.5); -->
    }
  </script>
</body>

</html>

Answer 1

Как добавить числовые значения из массива чисел. Чтобы на квадратах отображались цифры по порядку.

Например вот так... Только я смещение просто подобрал, а тебе придется рассчитывать его в зависимости от размера квадрата и размера самого шрифта.

const canvas = document.getElementById('mycanvas');
const ctx = canvas.getContext("2d");
const CELL_SIZE = 100;
const ROWS = 4,
  COLS = 4;
const CELL_COUNT = ROWS * COLS;
var cellCol = "green";
//Позиции на доске
const boardPosition = {
  x: 0,
  y: 0,
  w: COLS * CELL_SIZE,
  h: ROWS * CELL_SIZE
};
canvas.width = boardPosition.x + boardPosition.w;
canvas.height = boardPosition.y + boardPosition.h;
const a = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8];
const cells = [];
var cellIdx = 0;
while (cellIdx < CELL_COUNT) {
  drawCell(cellIdx++);
}

function drawCell(cellIdx) {
  const val = cells[cellIdx];
  const x = (cellIdx % COLS) * CELL_SIZE;
  const y = (cellIdx / COLS | 0) * CELL_SIZE;

  ctx.font = "60px Arial";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = "blue";
  ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
  ctx.fillStyle = cellCol;
  ctx.fillRect(x + 5, y + 5, CELL_SIZE - 10, CELL_SIZE - 10);
  ctx.fillStyle = "white"
  const v = a[cellIdx]
  ctx.fillText(v, x + 45, y + 55);
}

body {
  text-align: center;
}

#canvas {
  border: 2px solid green;
  background-color: lightblue;
}

<h1>javascript Canvas Array_Square</h1>
<canvas id="mycanvas"></canvas>

БЛОГ НА HUSL

как добавить цифры из массива чисел в fillText на canvas

Ответы (1 шт):