Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

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

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Графика в HTML5

Содержание

CanvasCanvas (англ. canvas — «холст») — набор API для создания и управления графикой обычно на JavaScript. Сanvas позволяет разместить на холсте: картинку, видео, текст. Залить всё это сплошным цветом, либо обвести контуры или даже добавить градиент. И, наконец, отрисовка фигур с помощью указания
Графика в HTML5 CanvasCanvas (англ. canvas — «холст») — набор API для создания и управления графикой обычно на JavaScript. Сanvas позволяет разместить Появление CanvasПридумано Apple в 2004, как компонент в движке WebKit Mac OS для приложений Поддержка CanvasИмитация: через VML ExplorerCanvas, через Flash fxCanvas. Особенности Изменение высоты или ширины холста сотрет всё его содержимое и все Критика Нагружает процессор и оперативную память;Плохая производительность при большом разрешении;Приходится вырисовывать отдельно каждый элемент. Варинты использованияАнимированная графика Варинты использованияВеб-приложения Варинты использованияИгры Синтаксис  canvas  Этот элемент не поддерживается АтрибутыHeight -задает высоту холста. По умолчанию 300 пикселов. Width - задает ширину 2D контекст отрисовкиvar canvas = document.getElementById( Стандартная система кординат Canvas API Прямоугольникctx.fillStyle = Кругctx.fillStyle = Кривыеctx.strokeStyle = Рисование линийctx.beginPath();ctx.moveTo(50, 50); ctx.lineTo(100, 100); ctx.stroke(); Текстctx.font = 'bold 7em СсылкиCanvas Cheat Sheethttp://www.w3schools.com/html/html5_canvas.asphttps://ru.wikipedia.org/wiki/Canvas_(HTML)
Слайды презентации

Слайд 2


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

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

на JavaScript. Сanvas позволяет разместить на холсте: картинку, видео, текст.

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




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

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

движке WebKit Mac OS для приложений Dashboard и Safari
Предложено W3C в качестве

стандарта
Широко поддерживается современными браузерами


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

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

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

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

содержимое и все настройки, проще говоря он создастся заново;
Начало

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




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

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

разрешении;
Приходится вырисовывать отдельно каждый элемент.


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

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

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

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

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

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

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



canvas

Синтаксис  canvas  Этот элемент не поддерживается




Этот элемент не поддерживается





Слайд 12

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

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


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


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

2D контекст отрисовкиvar canvas = document.getElementById(

= canvas.getContext("2d");


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

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

Слайд 15 Canvas API

Canvas API

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


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

Кругctx.fillStyle =

30, 0, Math.PI * 2, true);
ctx.fill();


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

Кривыеctx.strokeStyle =


ctx.bezierCurveTo(70, 50, 130, 150, 150, 100);
ctx.stroke();


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


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

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

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


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

Тени (Shadow API)context.shadowOffsetX = 5; context.shadowOffsetY = 5; context.shadowBlur = 4;


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,

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

'#f00');
g1.addColorStop(0.5, '#ff0');
gradient1.addColorStop(1, '#00f');

var g2 = context.createRadialGradient(sx,

sy, sr, dx, dy, dr);


  • Имя файла: grafika-v-html5.pptx
  • Количество просмотров: 139
  • Количество скачиваний: 0