Canvas - Рефераты
advertisement
Реферат на тему:
Canvas (HTML)
План:
Введение
1 История
2 Ситуация сегодня
3 Примеры
Примечания
Введение
Canvas (англ. canvas — «холст») — элемент HTML 5, который предназначен для создания
растрового изображения при помощи JavaScript.
1. История
Впервые элемент 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.
2. Ситуация сегодня
На сегодняшний день canvas чаще используется для построения графиков, простой
анимации и игр в веб-браузерах. Группа WHATWG предлагает использовать canvas как
стандарт для создания графики в новых поколениях веб-приложений.[1]
Организация Mozilla Foundation ведёт проект под названием Canvas 3D[2], целью которого
является добавить низкоуровневую поддержку графических ускорителей для отображения
трёхмерных изображений через HTML элемент canvas.
3. Примеры
Код идущий далее создаёт на странице canvas элемент:
<html>
<head>
<title>Пример использования</title>
</head>
<body>
<canvas id='example'>
Этот текст отобразится если браузер не поддерживает html5 элемент
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">
// функция рисует под углом линию из указанной точки длинной 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");
context = canvas.getContext("2d");
canvas.width = 480; // Ширина холста
canvas.height = 320; // высота холста
var x = canvas.width / 2;
var y = canvas.height;
var ln = 120; // начальная длина линии
var minLn = 4; // минимальная длина до которой рисуются линии
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();
}
</script>
</head>
<body onload="init();">
<canvas id="tree"></canvas>
</body>
</html>
Примечания
1. Спецификация от WHATWG - www.whatwg.org/specs/web-apps/currentwork/#canvas
2. Mozilla Canvas 3D