ВебмастерскаяСекреты вебмастера

Как нарисовать шахматную доску с помощью HTML5 Canvas

Как нарисовать шахматную доску с помощью 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.

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Проверьте также
Close
Back to top button