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

Question

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

const cardArray =[1,2,3,4,5,6,7,8,9,10];
// Рисуем квадрат
function draw_square(cellIdx) {
    let i = 0;
    i ++;
    ctx.fillStyle = 'green';       
    ctx.fillRect(x, y, 55, 55);
    ???  ctx.fillText(cardArray[i], x, y);
}

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

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

<script>
const canvas = document.getElementById('canvasElement');
const ctx = canvas.getContext("2d");
const CELL_SIZE = 100;
const ROWS = 4, COLS = 4;
const CELL_COUNT = ROWS * COLS;
var cellCol = "teal";
//Позиции на доске
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.shadowColor = '#000';
    ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
    
    ctx.fillStyle = cellCol;
    ctx.shadowBlur = 4;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 2;
    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.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
const a =[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
a.forEach((v, i) => {
  const x = 10 + ((i % 5) * 25)
  const y = 50  + (50 * Math.trunc(i / 5))
  ctx.fillText(v, x, y)
})

canvas {
  border: 1px solid;
}

<canvas></canvas>

БЛОГ НА HUSL

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

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