Как нарисовать шахматную доску с помощью HTML5 Canvas
Сегодня мы будем рисовать простую шахматную доску с помощью HTML5 и Canvas. Мы нарисуем простые черные и белые прямоугольники, чтобы создать их с помощью Canvas API HTML5
Особенности Canvas
Он в основном используется для рисования графики на веб-странице. Он действует как контейнер. У него всего два параметра: высота и ширина. Оба определяются пользователем, если они не установлены пользователем, они автоматически инициализируются как ширина 300 пикселей и высота 150 пикселей.
Давайте начнем
Шаг 1
Создайте свою html-страницу и определите заголовок
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
Шаг 2
Определите атрибуты холста
<body>
<canvas id="myCanvas" width="560" height="560" style="border:2px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
Шаг 3
Добавьте следующий скрипт, который рисует шахматную доску с помощью циклов.
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
for(i=0;i<8;i++)
{for(j=0;j<8;j++)
{ctx.moveTo(0,70*j);
ctx.lineTo(560,70*j);
ctx.stroke();
ctx.moveTo(70*i,0);
ctx.lineTo(70*i,560);
ctx.stroke();
var left = 0;
for(var a=0;a<8;a++) {
for(var b=0; b<8;b+=2) {
startX = b * 70;
if(a%2==0) startX = (b+1) * 70;
ctx.fillRect(startX + left,(a*70) ,70,70);
}}
}}
</script>
</body>
</html>
В приведенном выше коде мы,берем ширину ячейки равной 70 пикселям и зацикливаем ее 8 раз, чтобы отрисовать содержимое. Таким образом, мы нарисовали шахматную доску при помощи Canvas и HTML5.
-
Создано 14.02.2023 11:50:30
-
Михаил Русаков
Комментарии (1):
Круто если этот пример можно было бы открыть в jsfiddle и сразу посмотреть результат.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.