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
77 questions
Психология 100-200
Presentation
•
KG
91 questions
Правопис, VI
Presentation
•
6th Grade
78 questions
Решение систем уравнений методом сложения
Presentation
•
7th Grade
120 questions
Квиз игра для роботов / системщиков
Presentation
•
2nd - 6th Grade
56 questions
Мед.Ф.ЭКГ
Presentation
•
1st Grade
59 questions
Наймандар,керейттер,жалайырлар
Presentation
•
6th Grade
79 questions
slideShow
Presentation
•
2nd Grade
92 questions
Гидросфера: повторение 6 класс
Presentation
•
6th Grade
Popular Resources on Wayground
20 questions
STAAR Review Quiz #3
Quiz
•
8th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
6 questions
Marshmallow Farm Quiz
Quiz
•
2nd - 5th Grade
20 questions
Main Idea and Details
Quiz
•
5th Grade
20 questions
Context Clues
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
19 questions
Classifying Quadrilaterals
Quiz
•
3rd Grade
12 questions
What makes Nebraska's government unique?
Quiz
•
4th - 5th Grade
Discover more resources for Computers
6 questions
Marshmallow Farm Quiz
Quiz
•
2nd - 5th Grade
17 questions
2nd Grade Graphs (Bar & Picture)
Quiz
•
2nd Grade
15 questions
Telling Time
Quiz
•
2nd Grade
10 questions
Telling Time to the Nearest 5 Minutes
Quiz
•
2nd Grade
30 questions
Multiplication Facts 1-12
Quiz
•
2nd - 5th Grade
14 questions
Main Idea
Quiz
•
2nd - 3rd Grade
16 questions
Counting Coins counting money
Quiz
•
1st - 2nd Grade
10 questions
Telling Time
Quiz
•
2nd Grade