drawingApp

drawingApp

​

Multiple Choice

В какой тег мы обычно вставляем ссылку на какой-нибудь шрифт?

• <body>

• <head>

• <div>

• <td>

Я сам!

Добавляем в тег «head» вот такую конструкцию: 

"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"> 

   

Multiple Choice

Какой тег мы используем для создания элемента «canvas»?

• <div>

• <canvas>

• <canvas create>

• <box>

Я сам!

Добавляем тег «canvas» в элемент «body» и указываем у элемента «canvas» атрибут «id» со значением «drawing». Не забываем, что нужно нажать на вкладку «index.html».

Multiple Choice

Найди текстовый тег?

• <div>

• <box>

• <ul>

• <h4>

Я сам!

Добавляем тег «h4» после элемента «canvas» и пишем туда предложение «Параметры рисовалки:».

Multiple Choice

Какой тег мы можем использовать для добавление подписей к элементам «input»?

• <label>

• <description>

• <info>

• <table>

Я сам!

Добавляем тег «label» после элемента «h4» и пишем туда предложение: Выбери цвет или любое другое.

Multiple Choice

Какой тег мы можем использовать, чтобы пользователь мог ввести какую-то информацию на нашем сайте?

• <text>

• <input>

• <givver>

• <base>

Я сам!

Добавляем тег «input» после предложения в теге «label». Указываем у тега «input» атрибут «id» со значением «color» и атрибут «type» со значением «color».

Я сам!

Добавляем еще один тег «label» после закрывающегося тега «label». Указываем у этого элемента атрибут «for» со значением «size». После этого пишем предложение: Выбери размер кисти . Ты можешь не использовать предложенный текст, а написать свой.

Я сам!

Добавляем тег «input» после предложения в теге «label». Указываем у тега «input» атрибут «id» со значением «size» и атрибут «type» со значением «number».

Я сам!

Потом создаем кнопку с названием «Стереть» или любым другим. Указываем у кнопки атрибут «id» со значением «delete».

Я сам!

Потом создаем кнопку с названием «Сделать скриншот» или любым другим. Указываем у кнопки атрибут «id» со значением «screenShot».

Я сам!

После этого создаем тег «h1» и указываем предложение: Скриншоты: .Ты можешь не использовать предложенный текст, а использовать свой.

Multiple Choice

При помощи какого тега мы можем создать коробку-контейнер на нашем сайте?

• <box>

• <table>

• <ol>

• <th>

• <div>

Я сам!

После этого создаем тег «div» и указываем у него атрибут «id» со значением «output».

Настало время маленького дизайна

​

Multiple Select

Какие три параметра мы можем указать у свойства «border»? PS: здесь три правильных ответа

• цвет

• позицию

• тип

• размер рамки

• размер букв

Я сам!

Обратись к элементу с id «drawing» и укажи у него рамку.

А теперь пишем мозги ...

​

Я сам!

Создай переменную «drawing» и присвой ей выбранный элемент c id «drawing». Сделай так, чтобы элемент «drawing» занимал весь экран редактора. Создай переменную «c» и присвой ей элемент «drawing» с методом «getContext("2d")».

Я сам!

Создай переменную «output» и присвой ей выбранный элемент c id «output».

Я сам!

Создай переменную «btnDelete» и присвой ей выбранный элемент c id «delete».

Я сам!

Создай переменную «btnScreenshot» и присвой ей выбранный элемент c id «screenShot».

Я сам!

Создай переменную «color» и присвой ей выбранный элемент c id «color».

Я сам!

Создай переменную «size» и присвой ей выбранный элемент c id «size».

Я сам!

Создай переменную «state» и присвой ей значение «false».

Multiple Choice

Для чего нам нужна функция?

• Чтобы не повторять один и тот же код 20 раз

• Чтобы заменить ее на переменную

• Просто, чтобы была

Multiple Choice

Какое ключевое слово мы должны использовать для создания функции?

• let

• const

• function

• def

Poll

Должно ли быть имя у нашей функции?

• Да

• Нет

• Не знаю

Multiple Choice

Для чего функции нужны круглые скобочки? Пример: function hello(){}

• Чтобы мы вас спросили

• Чтобы было красиво

• Чтобы программисты запутались окончательно

• Чтобы передавать параметры

Multiple Select

Выбери все элементы для создания функции

• function

• имя

• ()

• {}

Я сам!

Создай функцию с именем «takeScrenshot». Помни, что тебе понадобится такая конструкция: function имя функции(){}

Я сам!

Укажите в теле функции «takeScrenshot» вот такую строчку: html2canvas(drawing).then(function(canvas){

    output.appendChild(canvas)

  }) . Не забывай, что тело функции это то, что находиться внутри наших скобочек «{}». Данную функцию мы запрограммировали для создания скриншотов.

Я сам!

Создай функцию с именем «setParametrs». Помни, что тебе понадобится такая конструкция: function имя функции(){}

Multiple Choice

Как ты думаешь, при помощи какой конструкции мы можем поменять ширину линии в canvas?

• c.lineWidth

• c.color

• c.stroke()

• c.beginPath()

Multiple Choice

Как ты думаешь, при помощи какой конструкции мы можем поменять цвет линии в canvas?

• c.strokeStyle

• c.color

• c.create

• c.beginPath()

Я сам!

Добавь в тело функции «setParametrs» вот такие конструкции: c.lineWidth = size.value;

  c.strokeStyle = color.value; 

Я сам!

Создай функцию с именем «draw» и укажи у нее параметр «e». Помни, что тебе понадобится такая конструкция: function имя функции(параметры){}

Multiple Choice

При помощи какой конструкции мы можем создать условие в программировании?

• condition

• if/else

• setCond

Я сам!

Добавь в тело функции «draw» if-блок и укажи у него условие:

state == true

Не забудь про скобочки ( (), {})

Я сам!

Добавь в тело if-блока вот такие конструкции:

c.lineTo(e.clientX, e.clientY);

  c.stroke();

Я сам!

Создай функцию с именем «startPainting». Помни, что тебе понадобится такая конструкция: function имя функции(){}

Я сам!

Присвой переменной «state» в теле функции «startPainting» значение «true»

Я сам!

Создай функцию с именем «stopPainting». Помни, что тебе понадобится такая конструкция: function имя функции(){}

Я сам!

Добавь в тело функции «stopPainting» конструкцию: c.beginPath()

Присвой переменной «state» в теле функции «stopPainting» значение «false».

Я сам!

Создай функцию с именем «clear». Помни, что тебе понадобится такая конструкция: function имя функции(){}

Multiple Choice

Какая конструкция помогает нам удалять элементы в нашем canvas?

• c.rect()

• c.arc()

• c.fillRect()

• c.clearRect()

Я сам!

В теле функции «clear» напиши вот такую конструкцию: c.clearRect(0,0,innerWidth,innerHeight)

Я сам!

Создайте функцию «setInterval» и у нее вот такие параметры: setParametrs, 10.

Я сам!

Добавляем элементу «drawing» слушатель событий с параметрами: "mousedown" и startPainting.

Я сам!

Добавляем элементу «drawing» слушатель событий с параметрами: "mousemove" и draw.

Я сам!

Добавляем элементу «drawing» слушатель событий с параметрами: "mouseup" и stopPainting.

Я сам!

Добавляем элементу «btnDelete» слушатель событий с параметрами: "click" и clear.

Я сам!

Добавляем элементу «btnScreenshot» слушатель событий с параметрами: "click" и takeScrenshot.