Элемент canvas для создания растрового изображения при помощи Javascript

Март 9, 2021

Главная
Информатика
Элемент canvas для создания растрового изображения при помощи Javascript

Содержание

2. Элемент canvas Canvas (холст) – элемент HTML5, предназначенный для создания растрового изображения при помощи Javascript. Атрибуты:
3. Начало отсчета координат на холсте x-координата y-координата (0,0) (10,0) (0,10) (10,10)
4. Вычерчивание линии function drawDiagonal() { var canvas = document.getElementById('diagonal'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(70, 140);
5. Вычерчивание линии. Результат
6. Рисование путей – 1 beginPath() – создает путь closePath() – закрывает путь stroke() – рисует границу
7. Рисование путей – 2 quadraticCurveTo(p1x, p1y, p2x, p2y) – квардатичная кривая Безье ctx.moveTo(20,20); ctx.quadraticCurveTo(20,100,200,20);
8. Рисование путей – 3 bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y) – кубическая кривая Безье ctx.moveTo(20,20); ctx.bezierCurveTo(20,100,200,100,200,20);
10. Скачать презентацию

Слайд 2

Элемент canvas
Canvas (холст) – элемент HTML5, предназначенный для создания растрового изображения при

Элемент canvas Canvas (холст) – элемент HTML5, предназначенный для создания растрового изображения

помощи Javascript.

Атрибуты:
id – необходим для нахождения элемента canvas программным путем.
width – ширина холста
height – высота холста

Слайд 3

Начало отсчета координат на холсте
x-координата
y-координата
(0,0)
(10,0)
(0,10)
(10,10)

Начало отсчета координат на холсте x-координата y-координата (0,0) (10,0) (0,10) (10,10)

Слайд 4

Вычерчивание линии

Получаем доступ к объекту canvas
Задается двумерный контекст
Начинается прорисовка пути
Передвижение в точку с координатами (70, 140)
Прорисовка линии до точки с координатами (140, 70)
Прорисовка заданных линий
После загрузки окна будет запущена функция drawDiagonal

Слайд 5

Вычерчивание линии. Результат

Вычерчивание линии. Результат

Слайд 6

Рисование путей – 1
beginPath() – создает путь
closePath() – закрывает путь
stroke() – рисует

Рисование путей – 1 beginPath() – создает путь closePath() – закрывает путь

границу фигуры
fill() – рисует закрашенную фигуру
moveTo(x,y) – перенос в точку (x,y)
lineTo(x,y) – отрисовывает линию из текущей точки в точку (x,y)
arc(x, y, radius, startAngle, endAngle, anticlockwise) – рисует дугу с центром в точке (x,y), радиусом radius, startAngle и endAngle определяют точки начала и конца дуги в радианах , anticlockwise логический параметр (по часовой стрелке или против).

Слайд 7

Рисование путей – 2
quadraticCurveTo(p1x, p1y, p2x, p2y) – квардатичная кривая Безье
ctx.moveTo(20,20); ctx.quadraticCurveTo(20,100,200,20);

Рисование путей – 2 quadraticCurveTo(p1x, p1y, p2x, p2y) – квардатичная кривая Безье ctx.moveTo(20,20); ctx.quadraticCurveTo(20,100,200,20);

Слайд 8

Рисование путей – 3
bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y) – кубическая кривая

Рисование путей – 3 bezierCurveTo(p1x, p1y, p2x, p2y, p3x, p3y) – кубическая кривая Безье ctx.moveTo(20,20); ctx.bezierCurveTo(20,100,200,100,200,20);

Безье

ctx.moveTo(20,20); ctx.bezierCurveTo(20,100,200,100,200,20);