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
62 questions
8-т11- Mechatronics
Presentation
•
8th Grade
53 questions
БАЛАНС Жизнь/работа
Presentation
•
KG
110 questions
Формирование наследственной массы
Presentation
•
KG - University
59 questions
8 кл, второстепенные члены предложения
Presentation
•
8th Grade
98 questions
passwordScreen
Presentation
•
1st Grade
80 questions
Подготовка к контрольной работе "Пропорции"
Presentation
•
7th Grade
58 questions
nameGenerator
Presentation
•
3rd Grade
57 questions
Презентация без названия
Presentation
•
2nd Grade
Popular Resources on Wayground
6 questions
Secondary Safety Quiz
Presentation
•
9th - 12th Grade
10 questions
MyPath Diagnostic Overview
Presentation
•
6th - 8th Grade
20 questions
Lab Safety Quiz
Quiz
•
6th Grade
21 questions
Continents and Oceans
Quiz
•
6th Grade
20 questions
Adding and Subtracting Decimals
Quiz
•
5th Grade
20 questions
Parts of Speech
Quiz
•
5th Grade
16 questions
Subject & Predicate
Quiz
•
5th Grade
21 questions
Lab Safety
Quiz
•
10th Grade
Discover more resources for Computers
20 questions
addition facts
Quiz
•
2nd Grade
8 questions
Week 1.2 Step-up to 3rd Grade TEK 2.2A
Quiz
•
2nd Grade
20 questions
Addition Facts within 20
Quiz
•
1st - 3rd Grade
17 questions
Greetings and Farewells in Spanish
Quiz
•
1st - 6th Grade
30 questions
Multiplication Facts 1-12
Quiz
•
2nd - 5th Grade
17 questions
2nd Grade Graphs (Bar & Picture)
Quiz
•
2nd Grade
20 questions
Addition and Subtraction facts
Quiz
•
1st - 3rd Grade
22 questions
Addition and Subtraction Facts
Quiz
•
1st - 2nd Grade