<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

В рамках курса даётся большое количество практических заданий, благодаря которым Вы не просто посмотрите курс, а действительно выполните ряд важнейших шагов, о которых в нём говорится.

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

protected.for protected.for 14.02.2023 13:06:51

Круто если этот пример можно было бы открыть в jsfiddle и сразу посмотреть результат.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.