Рисуем шахматную доску на канве
Здесь приведен демонстрационный пример шахматной доски, нарисованной на канве с использованием javaScript. Рисунок реальный, а не вставка картинки в страницу. Его можно сохранить в формате png. Если браузер у вас старый можете не увидеть картинку - переходите на новые технологии серфинга в сети, откажитесь от своих привычек.
Сanvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript.
Внизу приведен полный код страницы с таким рисунком. Пример приведен в учебных целях для тех кто начинает изучать возможности рисования на canvas. Разберем детально пример с акцентом на рисовании. Для начала определяем канву, на которой будет выполняться рисунок. Указываем ее id и размещаем там, где должен быть рисунок.
Теперь пишем скрипт для рисования. Устанавливаем размеры канвы: example.width = 300; example.height = 300; и цвет рамки: ctx.strokeStyle = '#B70A02'; Затем рисуем основное поле (рамки доски): ctx.strokeRect(15, 15, 266, 266); ctx.strokeRect(18, 18, 260, 260); Теперь меняем цвет будущих клеток внутри доски: ctx.fillStyle = '#AF5200'; и заполняем все: ctx.fillRect(20, 20, 256, 256); Идея такая - не рисовать каждую клетку, а залить всю доску одним цветом (цветом клеток), а затем только нарисовать белые квадраты в нужных местах, чтобы получилась шахматная доска. Код для рисования клеток в цикле:
for (i=0; i<8; i+=2)
for (j=0; j<8; j+=2) {
ctx.clearRect(20+i*32, 20+j*32, 32, 32);
ctx.clearRect(20+(i+1)*32, 20+(j+1)*32, 32, 32);
Похожие публикации: