Графика

Август 9, 2022

Содержание

2. В HTML5 определен элемент как «растровый холст, который может быть использован для отображения диаграмм, игровой графики
3. Теперь необходимо получить ссылку на этот объект и определить контекст рисунка: let picCanvas = document.getElementById("pic"); let
4. Нарисуем прямоугольник: function drawPic() { let picCanvas = document.getElementById("pic"); let picContext = picCanvas.getContext("2d"); picContext.beginPath(); picContext.fillRect(50, 25,
5. Прямоугольники можно создать с помощью трех методов: fillRect(x, y, width, height) рисует прямоугольник, заполненный текущим стилем
6. Свойства контура и заливки Свойство strokeStyle определяет текущий цвет контура Свойство fillStyle определяет текущий цвет заливки
7. Изменим цвет прямоугольника на синий: picContext.fillStyle="blue";
8. Самостоятельно Добавьте прямоугольник без заливки с красным контуром
9. Рисование окружности Метод arc() Метод arc() добавляет к пути участок окружности или арку. arc(x, y, radius,
10. x и y: x- и y-координаты, в которых начинается арка radius: радиус окружности, по которой создается
11. Пример Добавим круг: picContext.beginPath(); picContext.arc(300, 200, 100, 0, Math.PI*2, true); picContex.closePath(); picContext.stroke(); picContext.fill();
12. beginPath() - closePath() - добавляет в путь линию от текущей до первоначальной точки под пути и
13. Остальные примитивные фигуры создаются контурами. Контур - это набор точек, которые, соединяясь в отрезки линий, могут
14. Создание фигур, используя контуры, происходит в несколько шагов: Сначала вы создаете контур. Используя команды рисования, рисуете
15. Методы рисования контуров moveTo(x,y) - перемещает виртуальное перо. Определяет начальную точку рисования. beginPath() - создает новый
16. Пример Нарисуем треугольник: picContext.beginPath(); picContext.moveTo(300,200); picContext.lineTo(350,250); picContext.lineTo(300,250); picContext.closePath(); picContext.stroke();
18. Скачать презентацию

Слайд 2

В HTML5 определен элемент

использован для отображения диаграмм, игровой графики или изображений на лету».
Код выглядит так:

Слайд 3

Теперь необходимо получить ссылку на этот объект и определить контекст рисунка:
let

picCanvas = document.getElementById("pic");
let picContext = picCanvas.getContext("2d");
Переменную picCanvas будем использовать для обращения к нашей области рисунка.
Переменную picContext будем использовать для обращения к самому рисунку (т. н. контексту).
В контексте определены методы и свойства рисования.

Слайд 4

Нарисуем прямоугольник:

Слайд 5

Прямоугольники можно создать с помощью трех методов:
fillRect(x, y, width, height) рисует прямоугольник,

заполненный текущим стилем заливки.
strokeRect(x, y, width, height) рисует прямоугольник с текущим стилем линии. strokeRect не заливается внутри, он просто рисует границы.
clearRect(x, y, width, height) удаляет пиксели в указанном прямоугольнике.

Слайд 6

Свойства контура и заливки
Свойство strokeStyle определяет текущий цвет контура
Свойство fillStyle определяет текущий цвет заливки
Они могут

быть цветом, рисунком или градиентом.

Слайд 7

Изменим цвет прямоугольника на синий:
picContext.fillStyle="blue";

Слайд 8

Самостоятельно
Добавьте прямоугольник без заливки с красным контуром

Слайд 9

Рисование окружности
Метод arc()
Метод arc() добавляет к пути участок окружности или арку.
arc(x, y,

radius, startAngle, endAngle, anticlockwise)

Слайд 10

x и y: x- и y-координаты, в которых начинается арка
radius: радиус окружности, по

которой создается арка
startAngle и endAngle: начальный и конечный угол, которые усекают окружность до арки. Определяются радианами. Например, полная окружность - это 2π радиан. Если, к примеру, нам надо нарисовать полный круг, то для параметра endAngle можно указать значение 2π. В JavaScript эту веричину можно получить с помощью выражения Math.PI * 2.
anticlockwise: направление движения по окружности при отсечении ее части, ограниченной начальным и конечным углом. При значении true направление против часовой стрелки, а при значении false - по часовой стрелке.

Слайд 11

Пример
Добавим круг:
picContext.beginPath();
picContext.arc(300, 200, 100, 0, Math.PI*2, true);
picContex.closePath();
picContext.stroke();
picContext.fill();

Слайд 12

beginPath() -
closePath() - добавляет в путь линию от текущей до

первоначальной точки под пути и закрывает сам путь (давая возможность инициализировать новый).
stroke() прорисовывает контуры фигуры
fill() заливает фигуру

Слайд 13

Остальные примитивные фигуры создаются контурами.
Контур - это набор точек, которые, соединяясь

в отрезки линий, могут образовывать различные фигуры, изогнутые или нет, разной ширины и разного цвета. Контур (или субконтур) может быть закрытым.

Слайд 14

Создание фигур, используя контуры, происходит в несколько шагов:
Сначала вы создаете контур.
Используя

команды рисования, рисуете контур.
Закрываете контур (если нужно).
Созданный контур вы можете обвести или залить для его отображения.

Слайд 15

Методы рисования контуров
moveTo(x,y) - перемещает виртуальное перо. Определяет начальную точку рисования.
beginPath()

- создает новый контур.
closePath() - соединяет концы текущего контура.
lineTo(x,y) - рисует прямую линию до конечной точки.
quadraticCurveTo(x1,y1,x2,y2) - создает квадратичную фигуру по двум опорным точкам.
bezierCurveTo(x1, y1, x2, y2, x3, y3) - создает кривую Безье по трем опорным точкам.

Слайд 16

Пример
Нарисуем треугольник:
picContext.beginPath();
picContext.moveTo(300,200);
picContext.lineTo(350,250);
picContext.lineTo(300,250);
picContext.closePath();
picContext.stroke();

Графика

Содержание

В HTML5 определен элемент как «растровый холст, который может быть

Теперь необходимо получить ссылку на этот объект и определить контекст рисунка:let

Прямоугольники можно создать с помощью трех методов:fillRect(x, y, width, height) рисует прямоугольник,

Свойства контура и заливкиСвойство strokeStyle определяет текущий цвет контураСвойство fillStyle определяет текущий цвет заливкиОни могут

Изменим цвет прямоугольника на синий:picContext.fillStyle="blue";

СамостоятельноДобавьте прямоугольник без заливки с красным контуром

Рисование окружностиМетод arc()Метод arc() добавляет к пути участок окружности или арку. arc(x, y,

x и y: x- и y-координаты, в которых начинается аркаradius: радиус окружности, по

ПримерДобавим круг:picContext.beginPath();picContext.arc(300, 200, 100, 0, Math.PI*2, true);picContex.closePath();picContext.stroke();picContext.fill();

beginPath() - closePath() - добавляет в путь линию от текущей до

Остальные примитивные фигуры создаются контурами. Контур - это набор точек, которые, соединяясь

Создание фигур, используя контуры, происходит в несколько шагов:Сначала вы создаете контур.Используя

Методы рисования контуровmoveTo(x,y) - перемещает виртуальное перо. Определяет начальную точку рисования.beginPath()

ПримерНарисуем треугольник:picContext.beginPath();picContext.moveTo(300,200);picContext.lineTo(350,250);picContext.lineTo(300,250);picContext.closePath();picContext.stroke();

Похожие презентации