Отрисовка таблицы в canvas

282

17 октября 2021, 23:00

Есть PHP цикл, который рисует таблицу

<table border="1">
<?php
$i = 1;
$k = 1;
while ($i <= $v_value) {
    echo "<tr>";
    $t = 1;
    while ($t <= $g_value) {
        echo "<td align='center' id=".$k." ondblclick='postCell()' onclick='selectCell(".$k.")'></td>";
        $t++;
        $k++;
    }
    echo "</tr>";
    $i++;
}
?>
</table>

Для каждой ячейки задаётся уникальный ID по порядку. Можно кликнуть на любую ячейку, и выполняется JS скрипт

Хочу сделать игру на подобии пиксельной змейки (По порядку закрашиваются нужные ячейки нужным цветом). Подскажите, как можно это таблицу отрисовать в canvas?

Я нашёл код шахматной доски

<script>
    var canvas = document.getElementById("chessboard");
    var context = canvas.getContext('2d');
    // Размеры холста
    canvas.width  = 300;
    canvas.height = 300;
    // Внешняя рамка для доски
    context.strokeRect(15, 15, 266, 266);
    // Внутренняя рамка для доски
    context.strokeRect(18, 18, 260, 260);
    // Закрашиваем внутреннюю область черным цветом
    context.fillRect(20, 20, 256, 256);
    for (i = 0; i < 8; i += 2)
      for (j = 0; j < 8; j += 2) {
        context.clearRect(20 + i * 32, 20 + j * 32, 32, 32);
        context.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
      }
</script>

Но не получилось там отрисовать таблицу

Answer 1

Наверное можно сделать как-то так:

let imgData, size = 25,  
    context = canvas.getContext('2d'), 
    save = () => imgData = context.getImageData(0, 0, canvas.width, canvas.height), 
    restore = () => context.putImageData(imgData, 0, 0), 
    snap = n => Math.floor((+n)/size), 
    data = Array(snap(canvas.width)*snap(canvas.height)).fill(0), 
    xy = e => [snap(e.layerX) * size,snap(e.layerY) * size]; 
 
save(); 
 
canvas.addEventListener('click', e => { 
  restore(); 
  let i = snap(e.layerY)*snap(canvas.width) + snap(e.layerX); 
  rect(e, data[i] ? 'white' : `hsl(${Math.random()*360},77%,77%)`); 
  data[i] = data[i] ? 0 : 1; 
  save() 
  console.log(JSON.stringify(data)); 
}) 
 
canvas.addEventListener('mousemove', e => { 
  restore(); 
  rect(e, '#0002') 
}) 
 
function rect(e, color) { 
  context.fillStyle = color; 
  context.fillRect(...xy(e), size, size); 
}

canvas { 
  box-shadow: 0 0 1px 1px #0004; 
  margin:-6px; 
} 
 
.as-console-wrapper{ 
  height:44px 
}

<canvas id=canvas width=625 height=150></canvas>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Место менеджера памяти в проекте

Подскажите пожалуйста, вот например есть некий проект (C++), достаточно серьёзный, чтобы необходимость использовать собственный менеджер...

c++

void в параметре конструктора C++

При изучении ООП возник вопрос по поводу конструкторов

110

c++

Как правильно получить AddressOfEntryPoint?

Получаю адрес модуля и адрес функции main почему они не соответсвуют AddressOfEntryPoint?

170

c++

min max двусвязного списка

Необходимо найти минимальный и максимальный элемент в списке и обеспечитить вывод элементов списка, которые находятся между максимальным...

141