Графика в HTML5 презентация

Содержание

1. Графика в HTML5
3. Canvas Canvas (англ. canvas — «холст») — набор API для создания и управления
4. Появление Canvas Придумано Apple в 2004, как
5. Поддержка Canvas Имитация: через VML ExplorerCanvas, через Flash fxCanvas.
6. Особенности Изменение высоты или ширины холста
7. Критика Нагружает процессор и оперативную память;
8. Варинты использования Анимированная графика
9. Варинты использования Веб-приложения
10. Варинты использования Игры
11. Синтаксис
12. Атрибуты Height -задает высоту холста.
13. 2D контекст отрисовки var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");
14. Стандартная система кординат
15. Canvas API
16. Прямоугольник ctx.fillStyle = "rgb(65, 60, 50)";
17. Круг ctx.fillStyle = "rgb(65, 60, 50)"; ctx.beginPath();
18. Кривые ctx.strokeStyle = "rgb(65, 60, 50)"; ctx.beginPath();
19. Рисование линий ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.stroke();
20. Текст ctx.font = 'bold 7em "PT Sans",
21. Тени (Shadow API) context.shadowOffsetX = 5;
22. Градиенты var g1 = context.createLinearGradient(sx, sy, dx,
23. Ссылки Canvas Cheat Sheet http://www.w3schools.com/html/html5_canvas.asp https://ru.wikipedia.org/wiki/Canvas_(HTML)

Слайд 1Графика в HTML5

Слайд 2

Слайд 3Canvas
Canvas (англ. canvas — «холст») — набор API для создания и управления графикой обычно на JavaScript. Сanvas позволяет

разместить на холсте: картинку, видео, текст. Залить всё это сплошным цветом, либо обвести контуры или даже добавить градиент. И, наконец, отрисовка фигур с помощью указания контрольных точек. Причём можно изменять как ширину линий, так и кисть рисовки линий, стиль соединений линий.

Слайд 4Появление Canvas
Придумано Apple в 2004, как компонент в движке WebKit Mac OS

для приложений Dashboard и Safari
Предложено W3C в качестве стандарта
Широко поддерживается современными браузерами

Слайд 5Поддержка Canvas
Имитация: через VML ExplorerCanvas, через Flash fxCanvas.

Слайд 6Особенности
Изменение высоты или ширины холста сотрет всё его содержимое и все

настройки, проще говоря он создастся заново;
Начало отсчёта (точка 0,0) находится в левом верхнем углу. Но её можно сдвигать;
3D контекста нет, есть отдельные разработки, но они не стандартизованы;
Цвет текста можно указывать аналогично CSS, впрочем, как и размер шрифта.
Плоская картинка → отсутствие содержимого.
Не используются плагины.

Слайд 7Критика
Нагружает процессор и оперативную память;
Плохая производительность при большом разрешении;
Приходится вырисовывать отдельно

каждый элемент.

Слайд 8Варинты использования
Анимированная графика

Слайд 9Варинты использования
Веб-приложения

Слайд 10Варинты использования
Игры

Слайд 11Синтаксис

canvas

id="canvas">Этот элемент не поддерживается

Слайд 12

Атрибуты
Height -задает высоту холста. По умолчанию 300 пикселов.
Width - задает

ширину холста. По
умолчанию 150 пикселов.

Слайд 132D контекст отрисовки
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Слайд 14Стандартная система кординат

Слайд 15Canvas API

Слайд 16Прямоугольник
ctx.fillStyle = "rgb(65, 60, 50)";
ctx.fillRect(25, 50, 100, 100);
ctx.strokeStyle =

"rgb(65, 60, 50)";
ctx.strokeRect(130, 500, 40, 70);

Слайд 17Круг
ctx.fillStyle = "rgb(65, 60, 50)"; ctx.beginPath();
ctx.arc(100, 100, 30, 0, Math.PI

* 2, true);
ctx.fill();

Слайд 18Кривые
ctx.strokeStyle = "rgb(65, 60, 50)"; ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(70, 50, 130,

150, 150, 100);
ctx.stroke();

Слайд 19Рисование линий

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();

Слайд 20Текст
ctx.font = 'bold 7em "PT Sans", sans-serif';
ctx.fillStyle = 'rgba(0, 0,

0, 0.5)'; ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText('Ололо', 290, 330);

Слайд 21Тени (Shadow API)
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;

context.shadowColor = 'rgba(255, 0, 0, 0.5)';
context.fillStyle = '#00f';
context.fillRect(20, 20, 150, 100);

Слайд 22Градиенты
var g1 = context.createLinearGradient(sx, sy, dx, dy); g1.addColorStop(0, '#f00');
g1.addColorStop(0.5, '#ff0');

gradient1.addColorStop(1, '#00f');

var g2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);

Слайд 23Ссылки
Canvas Cheat Sheet
http://www.w3schools.com/html/html5_canvas.asp
https://ru.wikipedia.org/wiki/Canvas_(HTML)

Скачать презентацию

Графика в HTML5 презентация

Содержание

Слайд 1Графика в HTML5

Слайд 2

Слайд 3Canvas
Canvas (англ. canvas — «холст») — набор API для создания и управления графикой обычно на JavaScript. Сanvas позволяет

Слайд 4Появление Canvas
Придумано Apple в 2004, как компонент в движке WebKit Mac OS

Слайд 5Поддержка Canvas
Имитация: через VML ExplorerCanvas, через Flash fxCanvas.

Слайд 6Особенности
Изменение высоты или ширины холста сотрет всё его содержимое и все

Слайд 7Критика
Нагружает процессор и оперативную память;
Плохая производительность при большом разрешении;
Приходится вырисовывать отдельно

Слайд 8Варинты использования
Анимированная графика

Слайд 9Варинты использования
Веб-приложения

Слайд 10Варинты использования
Игры

Слайд 11Синтаксис

canvas

Слайд 12

Атрибуты
Height -задает высоту холста. По умолчанию 300 пикселов.
Width - задает

Слайд 132D контекст отрисовки
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Слайд 14Стандартная система кординат

Слайд 15Canvas API

Слайд 16Прямоугольник
ctx.fillStyle = "rgb(65, 60, 50)";
ctx.fillRect(25, 50, 100, 100);
ctx.strokeStyle =

Слайд 17Круг
ctx.fillStyle = "rgb(65, 60, 50)"; ctx.beginPath();
ctx.arc(100, 100, 30, 0, Math.PI

Слайд 18Кривые
ctx.strokeStyle = "rgb(65, 60, 50)"; ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(70, 50, 130,

Слайд 19Рисование линий

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();

Слайд 20Текст
ctx.font = 'bold 7em "PT Sans", sans-serif';
ctx.fillStyle = 'rgba(0, 0,

Слайд 21Тени (Shadow API)
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;

Слайд 22Градиенты
var g1 = context.createLinearGradient(sx, sy, dx, dy); g1.addColorStop(0, '#f00');
g1.addColorStop(0.5, '#ff0');

Слайд 23Ссылки
Canvas Cheat Sheet
http://www.w3schools.com/html/html5_canvas.asp
https://ru.wikipedia.org/wiki/Canvas_(HTML)

Обратная связь

Что такое ThePresentation.ru?

Графика в HTML5 презентация

Содержание

Слайд 1Графика в HTML5

Слайд 2

Слайд 3CanvasCanvas (англ. canvas — «холст») — набор API для создания и управления графикой обычно на JavaScript. Сanvas позволяет

Слайд 4Появление CanvasПридумано Apple в 2004, как компонент в движке WebKit Mac OS

Слайд 5Поддержка CanvasИмитация: через VML ExplorerCanvas, через Flash fxCanvas.

Слайд 6Особенности Изменение высоты или ширины холста сотрет всё его содержимое и все

Слайд 7Критика Нагружает процессор и оперативную память;Плохая производительность при большом разрешении;Приходится вырисовывать отдельно

Слайд 8Варинты использованияАнимированная графика

Слайд 9Варинты использованияВеб-приложения

Слайд 10Варинты использованияИгры

Слайд 11Синтаксис canvas

Слайд 12АтрибутыHeight -задает высоту холста. По умолчанию 300 пикселов. Width - задает

Слайд 132D контекст отрисовкиvar canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");

Слайд 14Стандартная система кординат

Слайд 15Canvas API

Слайд 16Прямоугольникctx.fillStyle = "rgb(65, 60, 50)"; ctx.fillRect(25, 50, 100, 100); ctx.strokeStyle =

Слайд 17Кругctx.fillStyle = "rgb(65, 60, 50)"; ctx.beginPath(); ctx.arc(100, 100, 30, 0, Math.PI

Слайд 18Кривыеctx.strokeStyle = "rgb(65, 60, 50)"; ctx.beginPath(); ctx.moveTo(50, 100); ctx.bezierCurveTo(70, 50, 130,

Слайд 19Рисование линийctx.beginPath();ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.stroke();

Слайд 20Текстctx.font = 'bold 7em "PT Sans", sans-serif'; ctx.fillStyle = 'rgba(0, 0,

Слайд 21Тени (Shadow API)context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4;

Слайд 22Градиентыvar g1 = context.createLinearGradient(sx, sy, dx, dy); g1.addColorStop(0, '#f00'); g1.addColorStop(0.5, '#ff0');

Слайд 23СсылкиCanvas Cheat Sheethttp://www.w3schools.com/html/html5_canvas.asphttps://ru.wikipedia.org/wiki/Canvas_(HTML)

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

Обратная связь

Что такое ThePresentation.ru?

Слайд 3Canvas
Canvas (англ. canvas — «холст») — набор API для создания и управления графикой обычно на JavaScript. Сanvas позволяет

Слайд 4Появление Canvas
Придумано Apple в 2004, как компонент в движке WebKit Mac OS

Слайд 5Поддержка Canvas
Имитация: через VML ExplorerCanvas, через Flash fxCanvas.

Слайд 6Особенности
Изменение высоты или ширины холста сотрет всё его содержимое и все

Слайд 7Критика
Нагружает процессор и оперативную память;
Плохая производительность при большом разрешении;
Приходится вырисовывать отдельно

Слайд 8Варинты использования
Анимированная графика

Слайд 9Варинты использования
Веб-приложения

Слайд 10Варинты использования
Игры

Слайд 11Синтаксис

canvas

Слайд 12

Атрибуты
Height -задает высоту холста. По умолчанию 300 пикселов.
Width - задает

Слайд 132D контекст отрисовки
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Слайд 16Прямоугольник
ctx.fillStyle = "rgb(65, 60, 50)";
ctx.fillRect(25, 50, 100, 100);
ctx.strokeStyle =

Слайд 17Круг
ctx.fillStyle = "rgb(65, 60, 50)"; ctx.beginPath();
ctx.arc(100, 100, 30, 0, Math.PI

Слайд 18Кривые
ctx.strokeStyle = "rgb(65, 60, 50)"; ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(70, 50, 130,

Слайд 19Рисование линий

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.stroke();

Слайд 20Текст
ctx.font = 'bold 7em "PT Sans", sans-serif';
ctx.fillStyle = 'rgba(0, 0,

Слайд 21Тени (Shadow API)
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;

Слайд 22Градиенты
var g1 = context.createLinearGradient(sx, sy, dx, dy); g1.addColorStop(0, '#f00');
g1.addColorStop(0.5, '#ff0');

Слайд 23Ссылки
Canvas Cheat Sheet
http://www.w3schools.com/html/html5_canvas.asp
https://ru.wikipedia.org/wiki/Canvas_(HTML)