flyingBall

flyingBall

Всегда с нами

Уже умеем

Сегодня мы познакомимся с новым тегом «canvas». Данный тег позволяет нам рисовать и отрисовывать 2d фигуры/картинки.

Уже умеем

Создай элемент тег «canvas» в элемент «body».

Цвета

Уже умеем

Обратись к элементу «body» и укажи у него свойства:

text-align:center;

 padding: 0px;

 margin: 0px;

Уже умеем

Обратись к элементу «canvas» и укажи у него свойства:

 border: 1px solid black;

Самое страшное впереди

Уже умеем

Создай переменную «canv» и присвой ей выбранный элемент «canvas»

Что-то новое

canv.getContext("2d") - конструкция, которая создаст супер объект, у которого мы сможем вызывать методы для рисования на нашем холсте.

Что-то новое

Создай переменную «c» и присвой ей конструкцию: canv.getContext("2d");

Что-то новое

Напиши конструкции:

canv.width = window.innerWidth;

canv.height = window.innerHeight;

Как получить или установить ширину/высоту canvas?

Вызов параметра «width» или «height» у переменной, где хранится элемент canvas, обеспечит такую функциональность.

Посмотри на пример на следующем сладе, чтобы лучше понять :)

widthAndHeightEx - Replit

You can open this webpage in a new tab.

Copy link

Open in new tab

Как получить ширину/высоту экрана, где находится наш сайт?

Вызов параметра «innerWidth» или «innerHeight» у элемента «window» помогут нам получить высоту или ширину окна.

widthAndHeightOfTheWindow - Replit

You can open this webpage in a new tab.

Copy link

Open in new tab

Что-то новое

Создай переменную «circleX» и присвой ей значение больше 50

Что-то новое

Создай переменную «circleY» и присвой ей значение больше 50

Что-то новое

Создай переменную «speedX» и присвой ей значение больше 1

Что-то новое

Создай переменную «speedY» и присвой ей значение больше 1

Что-то новое

Создай переменную «circleRadius» и присвой ей значение от 50

Что-то новое

Создай конструкцию «setInterval» с параметрами: function(){}, 10

Как рисовать прямоугольник в Canvas?

Конструкции: c.fillRect() и c.rect()

Позволяют нам отрисовать прямоугольник.

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

rectangleInCanvas - Replit

You can open this webpage in a new tab.

Copy link

Open in new tab

Что такое c.fillStyle?

Данная конструкция устанавливает цвет заливки элементов.

PS: когда ты установил какой-то цвет заливки, то все элементы после конструкции c.fillStyle будут залиты именно в этот оттенок.

Если ты хочешь сменить цвет, то тебе нужно еще раз вызвать конструкцию «c.fillStyle» и установить цвет.

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

fillStyle - Replit

You can open this webpage in a new tab.

Copy link

Open in new tab

Что-то новое

Внутри функции у конструкции «setInterval» создай конструкции:

c.fillStyle = "rgba(0,0,0,0.04)";

c.fillRect(0,0, canv.width, canv.height);

Что такое c.fill() ?

Данная конструкция заливает элемент, который стоит до нее в цвет, установленный в конструкции «c.fillStyle»

PS: у некоторых элементов просто нет совмещенного метода отрисовки и заливки элемента ( c.fillRect() ). К примеру круг мы не можем создать и залить с помощью конструкции c.fillArc()

Ее просто нет :(

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

fillConstruction - Replit

You can open this webpage in a new tab.

Copy link

Open in new tab

Что-то новое

Внутри функции у конструкции «setInterval» создай конструкции:

c.fillStyle = "red";

 c.fill();

c.beginPath();

Что-то новое

После этого добавляем:

c.beginPath();

c.arc(circleX, circleY, circleRadius, 0, 2 * Math.PI);

c.stroke();

Что-то новое

Создай if-блок и укажи у него вот такое условие:

circleX+circleRadius > canv.width || circleX-circleRadius < 0

Что-то новое

Если условие верно, то присвой переменной «speedX» значение

-speedX

PS: -speedX. В этой конструкции у нас минус.

Что-то новое

Выйди из if-блока.

Создай еще один if-блок и укажи у него вот такое условие:

circleY+circleRadius > canv.height || circleY-circleRadius < 0

Что-то новое

Если условие верно, то присвой переменной «speedY» значение

-speedY

PS: -speedY. В этой конструкции у нас минус.

Что-то новое

Выйди из if-блока. Создай внутри функции конструкции «setInterval» конструкцию для увеличения переменной «circleX» на переменную «speedX»

Что-то новое

После этого создай конструкцию для увеличения переменной «circleY» на переменную «speedY»