drawingApp
Presentation
•
Computers
•
2nd Grade
•
Medium
Edukoht Edukohter
Used 11+ times
FREE Resource
79 Slides • 16 Questions
1
drawingApp
2
Multiple Choice
В какой тег мы обычно вставляем ссылку на какой-нибудь шрифт?
<body>
<head>
<div>
<td>
3
Я сам!
Добавляем в тег «head» вот такую конструкцию:
"https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js">
4
5
Multiple Choice
Какой тег мы используем для создания элемента «canvas»?
<div>
<canvas>
<canvas create>
<box>
6
Я сам!
Добавляем тег «canvas» в элемент «body» и указываем у элемента «canvas» атрибут «id» со значением «drawing». Не забываем, что нужно нажать на вкладку «index.html».
7
8
Multiple Choice
Найди текстовый тег?
<div>
<box>
<ul>
<h4>
9
Я сам!
Добавляем тег «h4» после элемента «canvas» и пишем туда предложение «Параметры рисовалки:».
10
11
Multiple Choice
Какой тег мы можем использовать для добавление подписей к элементам «input»?
<label>
<description>
<info>
<table>
12
Я сам!
Добавляем тег «label» после элемента «h4» и пишем туда предложение: Выбери цвет или любое другое.
13
14
Multiple Choice
Какой тег мы можем использовать, чтобы пользователь мог ввести какую-то информацию на нашем сайте?
<text>
<input>
<givver>
<base>
15
Я сам!
Добавляем тег «input» после предложения в теге «label». Указываем у тега «input» атрибут «id» со значением «color» и атрибут «type» со значением «color».
16
17
Я сам!
Добавляем еще один тег «label» после закрывающегося тега «label». Указываем у этого элемента атрибут «for» со значением «size». После этого пишем предложение: Выбери размер кисти . Ты можешь не использовать предложенный текст, а написать свой.
18
19
Я сам!
Добавляем тег «input» после предложения в теге «label». Указываем у тега «input» атрибут «id» со значением «size» и атрибут «type» со значением «number».
20
21
Я сам!
Потом создаем кнопку с названием «Стереть» или любым другим. Указываем у кнопки атрибут «id» со значением «delete».
22
23
Я сам!
Потом создаем кнопку с названием «Сделать скриншот» или любым другим. Указываем у кнопки атрибут «id» со значением «screenShot».
24
25
Я сам!
После этого создаем тег «h1» и указываем предложение: Скриншоты: .Ты можешь не использовать предложенный текст, а использовать свой.
26
27
Multiple Choice
При помощи какого тега мы можем создать коробку-контейнер на нашем сайте?
<box>
<table>
<ol>
<th>
<div>
28
Я сам!
После этого создаем тег «div» и указываем у него атрибут «id» со значением «output».
29
30
Настало время маленького дизайна
31
Multiple Select
Какие три параметра мы можем указать у свойства «border»? PS: здесь три правильных ответа
цвет
позицию
тип
размер рамки
размер букв
32
Я сам!
Обратись к элементу с id «drawing» и укажи у него рамку.
33
34
А теперь пишем мозги ...
35
Я сам!
Создай переменную «drawing» и присвой ей выбранный элемент c id «drawing». Сделай так, чтобы элемент «drawing» занимал весь экран редактора. Создай переменную «c» и присвой ей элемент «drawing» с методом «getContext("2d")».
36
37
Я сам!
Создай переменную «output» и присвой ей выбранный элемент c id «output».
38
39
Я сам!
Создай переменную «btnDelete» и присвой ей выбранный элемент c id «delete».
40
41
Я сам!
Создай переменную «btnScreenshot» и присвой ей выбранный элемент c id «screenShot».
42
43
Я сам!
Создай переменную «color» и присвой ей выбранный элемент c id «color».
44
45
Я сам!
Создай переменную «size» и присвой ей выбранный элемент c id «size».
46
47
Я сам!
Создай переменную «state» и присвой ей значение «false».
48
49
Multiple Choice
Для чего нам нужна функция?
Чтобы не повторять один и тот же код 20 раз
Чтобы заменить ее на переменную
Просто, чтобы была
50
Multiple Choice
Какое ключевое слово мы должны использовать для создания функции?
let
const
function
def
51
Poll
Должно ли быть имя у нашей функции?
Да
Нет
Не знаю
52
Multiple Choice
Для чего функции нужны круглые скобочки? Пример: function hello(){}
Чтобы мы вас спросили
Чтобы было красиво
Чтобы программисты запутались окончательно
Чтобы передавать параметры
53
Multiple Select
Выбери все элементы для создания функции
function
имя
()
{}
54
Я сам!
Создай функцию с именем «takeScrenshot». Помни, что тебе понадобится такая конструкция: function имя функции(){}
55
56
Я сам!
Укажите в теле функции «takeScrenshot» вот такую строчку: html2canvas(drawing).then(function(canvas){
output.appendChild(canvas)
}) . Не забывай, что тело функции это то, что находиться внутри наших скобочек «{}». Данную функцию мы запрограммировали для создания скриншотов.
57
58
Я сам!
Создай функцию с именем «setParametrs». Помни, что тебе понадобится такая конструкция: function имя функции(){}
59
60
Multiple Choice
Как ты думаешь, при помощи какой конструкции мы можем поменять ширину линии в canvas?
c.lineWidth
c.color
c.stroke()
c.beginPath()
61
Multiple Choice
Как ты думаешь, при помощи какой конструкции мы можем поменять цвет линии в canvas?
c.strokeStyle
c.color
c.create
c.beginPath()
62
Я сам!
Добавь в тело функции «setParametrs» вот такие конструкции: c.lineWidth = size.value;
c.strokeStyle = color.value;
63
64
Я сам!
Создай функцию с именем «draw» и укажи у нее параметр «e». Помни, что тебе понадобится такая конструкция: function имя функции(параметры){}
65
66
Multiple Choice
При помощи какой конструкции мы можем создать условие в программировании?
condition
if/else
setCond
67
Я сам!
Добавь в тело функции «draw» if-блок и укажи у него условие:
state == true
Не забудь про скобочки ( (), {})
68
69
Я сам!
Добавь в тело if-блока вот такие конструкции:
c.lineTo(e.clientX, e.clientY);
c.stroke();
70
71
Я сам!
Создай функцию с именем «startPainting». Помни, что тебе понадобится такая конструкция: function имя функции(){}
72
73
Я сам!
Присвой переменной «state» в теле функции «startPainting» значение «true»
74
75
Я сам!
Создай функцию с именем «stopPainting». Помни, что тебе понадобится такая конструкция: function имя функции(){}
76
77
Я сам!
Добавь в тело функции «stopPainting» конструкцию: c.beginPath()
Присвой переменной «state» в теле функции «stopPainting» значение «false».
78
79
Я сам!
Создай функцию с именем «clear». Помни, что тебе понадобится такая конструкция: function имя функции(){}
80
81
Multiple Choice
Какая конструкция помогает нам удалять элементы в нашем canvas?
c.rect()
c.arc()
c.fillRect()
c.clearRect()
82
Я сам!
В теле функции «clear» напиши вот такую конструкцию: c.clearRect(0,0,innerWidth,innerHeight)
83
84
Я сам!
Создайте функцию «setInterval» и у нее вот такие параметры: setParametrs, 10.
85
86
Я сам!
Добавляем элементу «drawing» слушатель событий с параметрами: "mousedown" и startPainting.
87
88
Я сам!
Добавляем элементу «drawing» слушатель событий с параметрами: "mousemove" и draw.
89
90
Я сам!
Добавляем элементу «drawing» слушатель событий с параметрами: "mouseup" и stopPainting.
91
92
Я сам!
Добавляем элементу «btnDelete» слушатель событий с параметрами: "click" и clear.
93
94
Я сам!
Добавляем элементу «btnScreenshot» слушатель событий с параметрами: "click" и takeScrenshot.
95
drawingApp
Show answer
Auto Play
Slide 1 / 95
SLIDE
Similar Resources on Wayground
96 questions
Выпускной 3 год
Presentation
•
9th - 12th Grade
53 questions
Презентация КРЯ 05.09
Presentation
•
KG
50 questions
rockPaperScissors
Presentation
•
1st Grade
59 questions
Неформальные молодёжные группы
Presentation
•
8th Grade
80 questions
Урок без названия
Presentation
•
1st Grade
65 questions
changeColors + autoBordersWithCats
Presentation
•
2nd Grade
62 questions
Проценты
Presentation
•
6th Grade
Popular Resources on Wayground
11 questions
Hallway & Bathroom Expectations
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Assessment 2
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
12 questions
2026 TAP Technology in the Classroom
Presentation
•
Professional Development
15 questions
HCS SCI 05 Summer School Assessment 2 Review
Quiz
•
5th Grade
15 questions
HCS SCI 04 Summer School Review 2
Quiz
•
4th Grade
59 questions
Geometry Unit 3 Review
Quiz
•
9th - 12th Grade
14 questions
FAST ELA READING SMAPLE TEST MATERIALS
Passage
•
3rd Grade