Элемент {{HTMLElement("canvas")}} – это HTML-элемент, который может использоваться для рисования графики с помощью скриптов (обычно это JavaScript). Например, он может использоваться для рисования графиков, создания фотокомпозиций, создавания анимаций или даже обработки видео в реальном времени.
Приложения от Mozilla поддерживают <canvas>
начиная с Gecko 1.8 (т.е. с Firefox 1.5). Этот элемент первоначально был внедрен Apple для OS X Dashboard и Safari. Internet Explorer поддерживает <canvas>
начиная с 9 версии и новее; для более ранних версий IE поддержку для <canvas> можно добавить с помощью скрипта из проекта Google's Explorer Canvas. Google Chrome и Opera 9 также поддерживают <canvas>
. Более подробно можно узнать на can i use.
Элемент <canvas>
также используется технологией WebGL чтобы аппаратно ускорять 3D графику на вебстраницах.
Документация
- Спецификация
- Элемент
<canvas> часть спецификации WhatWG Web applications 1.0, также известной как HTML 5.
- Учебник Canvas
- Учебник по <canvas>, описывающий базовый материал и более сложные вещи.
- Примеры кода:Canvas
- Здесь приводится код для разработчиков, которые работают с canvas.
- Примеры Canvas
- Несколько демо с
<canvas> .
- Рисование объектов DOM в canvas
- Как рисовать содержимое DOM, т.е. элементы HTML в canvas.
- Простой рейкастинг
- Демо с анимацией трассировки лучей и использованием canvas.
- Интерфейс DOM Canvas
- Canvas DOM интерфейс на Gecko.
Смотреть все...
|
Ресурсы
Библиотеки
- libCanvas это легкий но тем не менее очень функциональный фреймворк canvas
- Processing.js это порт языка визуализации Processing
- EaselJS это библиотека с API похожим на Flash
- PlotKit это библиотека для создания чартов и графики
- Rekapi это API Canvas для создания аникации на кейфреймах
- PhiloGL это фреймворк WebGL для визуализации данных, разработки игр и креативного кодирования.
- JavaScript InfoVis Toolkit создает интерактивную 2D Canvas визуализацию данных для Web.
- Frame-Engine это фреймворк для разработки приложений и игр.
|
{{HTML5ArticleTOC()}}