- Canvas (HTML)
-
HTML - HTML и HTML5
- Динамический HTML
- XHTML
- XHTML Mobile Profile и CHTML
- Canvas
- Кодировки символов
- Document Object Model
- Семейство шрифтов
- Редактор HTML
- Элементы HTML
- Мнемоники в HTML
- Фреймы HTML
- HTML5 audio и HTML5 video
- Скрипты в HTML
- Браузерный движок
- Quirks mode
- Таблицы стилей
- Каскадные таблицы стилей
- Unicode и HTML
- W3C и WHATWG
- Цвета HTML
- Web Storage
- WebGL
- Сравнение
- языков разметки документов
- браузеров
- браузерных движков для
- HTML
- HTML5
- HTML5 Canvas
- HTML5 Media
- XHTML (1.1)
Canvas (англ. canvas — «холст») — элемент HTML5, предназначенный для создания векторного изображения при помощи JavaScript.
Содержание
История
Впервые элемент
canvasбыл представлен компанией Apple в движке WebKit для Mac OS X с целью последующего его использования в приложениях Dashboard и Safari.Поддержка
canvasв Gecko появилась в версии 1.8 (версия 1.5 браузера Firefox), в Presto с версии 9.0 браузера Opera. В Internet Explorer 9 поддержкаcanvasреализована только начиная с версии Platform Preview 3. Ранее ситуацию с отсутствием canvas в IE исправила компания Google, выпустившая собственное расширение, написанное на JavaScript, под названием ExplorerCanvas.[1]Развитие
На сегодняшний день canvas чаще используется для построения графиков, простой анимации и игр в браузерах. Группа WHATWG предлагает использовать canvas как стандарт для создания графики в новых поколениях веб-приложений.[2]
Организация Mozilla Foundation ведёт проект под названием Canvas 3D[3], целью которого является добавить низкоуровневую поддержку графических ускорителей для отображения трёхмерных изображений через HTML-элемент canvas.
Использование
Использовать канву можно несколькими способами, например:
<!doctype html> <html> <head> <title> Canvas </title> <script type="text/javascript" src="example.js"> </head> <body> <canvas id="canvas"> Этот элемент не поддерживается</canvas> </body> </html>
function onLoadHandler() { var canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); //Использование канвы } window.onload = onLoadHandler;
Примеры
Создание на странице canvas-элемента<html> <head> <title>Пример использования</title> </head> <body> <canvas> Этот текст будет показан, если не поддерживается canvas. </canvas> </body> </html>
Использование JavaScript для рисования окружности<html> <head> <title>circle</title> </head> <body> <canvas id='example'>Обновите браузер</canvas> <script type="text/javascript"> var canvas = document.getElementById("example"); var context = canvas.getContext("2d"); function drawCircle(x, y, r) { context.arc(x, y, r, 0, 2 * Math.PI, false); } context.beginPath(); drawCircle(150, 75, 50); context.lineWidth = 15; context.strokeStyle = "#0f0"; context.stroke(); </script> </body> </html>
Отрисовка на canvas обдуваемого дерева Пифагора<html> <head> <title>Дерево Пифагора</title> <script type="text/javascript"> // функция рисует под углом angle линию из указанной точки длиной ln function drawLine(x, y, ln, angle) { context.moveTo(x, y); context.lineTo(Math.round(x + ln * Math.cos(angle)), Math.round(y - ln * Math.sin(angle))); } // Функция рисует дерево function drawTree(x, y, ln, minLn, angle) { if (ln > minLn) { ln = ln * 0.75; drawLine(x, y, ln, angle); x = Math.round(x + ln * Math.cos(angle)); y = Math.round(y - ln * Math.sin(angle)); drawTree(x, y, ln, minLn, angle + Math.PI / 4); drawTree(x, y, ln, minLn, angle - Math.PI / 6); // если поставить угол Math.PI/4 , то выйдет классическое дерево } } // Инициализация переменных function init() { var canvas = document.getElementById("tree"); var x = 100 + (canvas.width / 2); var y = 170 + canvas.height; // положении ствола var ln = 120; // начальная длина линии var minLn = 5; // минимальная длина линии canvas.width = 480; // Ширина холста canvas.height = 320; // высота холста context = canvas.getContext("2d"); context.fillStyle = "#ddf"; // цвет фона context.strokeStyle = "#020"; //цвет линий context.fillRect(0, 0, canvas.width, canvas.height); context.lineWidth = 2; // ширина линий context.beginPath(); drawTree(x, y, ln, minLn, Math.PI / 2); context.stroke(); } window.onload = init; </script> </head> <body> <canvas id="tree"></canvas> </body> </html>
См. также
Примечания
Ссылки
- Обучение основам canvas на сайте Mozilla Developer center
- Canvas reference page в Apple Developers Connection
- Canvas API
- Wii Opera SDK Canvas Library for Internet Gaming
- Примеры использования
Категории:- HTML
- Графика в Web
Wikimedia Foundation. 2010.
