Canvas (HTML)
Canvas (англ. canvas — «холст») — элемент HTML 5, который предназначен для создания растрового изображения при помощи 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.
[править] Ситуация сегодня
На сегодняшний день canvas чаще используется для построения графиков, простой анимации и игр в веб-браузерах. Группа WHATWG предлагает использовать canvas как стандарт для создания графики в новых поколениях веб-приложений.[1]
Организация Mozilla Foundation ведёт проект под названием Canvas 3D[2], целью которого является добавить низкоуровневую поддержку графических ускорителей для отображения трёхмерных изображений через HTML элемент canvas.
[править] Примеры
Код, идущий далее, создаёт на странице 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">
// функция рисует под углом 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");
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>
Сохранение изображения в теле документа и его отображение:
// Изображение сохранено в массиве colorArray в формате RGBA
//(в данном примере - иконка VirtualBox)
var colorArray = [255, 255, 255, 255, 255, 255, 255, 255, 242, 239, 239, 255, 242, 239, 240, 255, 242, 238, 239, 255, 242, 238, 239,
255, 242, 238, 239, 255, 242, 238, 239, 255, 242, 238, 239, 255, 242, 238, 239, 255, 242, 238, 239, 255, 241, 238,
239, 255, 246, 244, 244, 255, 255, 255, 255, 255, 255, 255, 255, 255, 242, 239, 240, 255, 85, 124, 158, 255, 110,
158, 188, 255, 109, 155, 185, 255, 109, 155, 186, 255, 109, 155, 186, 255, 109, 155, 186, 255, 109, 154, 185, 255,
109, 154, 185, 255, 109, 155, 186, 255, 109, 156, 186, 255, 112, 157, 188, 255, 94, 138, 174, 255, 159, 166, 180,
255, 253, 253, 253, 255, 175, 177, 189, 255, 142, 213, 242, 255, 95, 193, 230, 255, 88, 187, 226, 255, 87, 188, 225,
255, 86, 187, 222, 255, 84, 186, 221, 255, 84, 186, 219, 255, 84, 186, 218, 255, 83, 186, 217, 255, 83, 185, 216,
255, 78, 182, 213, 255, 137, 224, 253, 255, 94, 124, 155, 255, 238, 237, 239, 255, 173, 175, 186, 255, 121, 201, 234,
255, 130, 189, 214, 255, 254, 252, 253, 255, 231, 240, 245, 255, 233, 241, 245, 255, 229, 239, 244, 255, 231, 240,
244, 255, 226, 237, 243, 255, 233, 241, 245, 255, 234, 242, 246, 255, 216, 229, 237, 255, 76, 176, 217, 255, 97, 126,
155, 255, 224, 225, 229, 255, 173, 175, 186, 255, 114, 195, 232, 255, 156, 199, 217, 255, 158, 198, 218, 255, 75, 151,
187, 255, 79, 153, 187, 255, 100, 165, 196, 255, 80, 153, 187, 255, 117, 175, 201, 255, 66, 146, 182, 255, 67, 147,
184, 255, 239, 243, 246, 255, 74, 170, 212, 255, 96, 125, 155, 255, 223, 225, 228, 255, 175, 176, 186, 255, 108, 192,
230, 255, 162, 198, 216, 255, 160, 195, 214, 255, 83, 147, 182, 255, 86, 150, 184, 255, 184, 211, 225, 255, 116, 170,
198, 255, 236, 243, 246, 255, 80, 151, 185, 255, 73, 148, 183, 255, 238, 243, 246, 255, 73, 167, 210, 255, 96, 124,
155, 255, 224, 225, 228, 255, 175, 176, 187, 255, 102, 188, 227, 255, 161, 193, 212, 255, 216, 229, 237, 255, 154,
188, 210, 255, 73, 136, 175, 255, 230, 238, 244, 255, 189, 213, 226, 255, 252, 253, 254, 255, 141, 185, 207, 255,
70, 144, 180, 255, 238, 244, 245, 255, 73, 164, 208, 255, 96, 124, 155, 255, 224, 225, 228, 255, 176, 177, 187, 255,
97, 183, 225, 255, 165, 193, 211, 255, 200, 217, 228, 255, 240, 244, 248, 255, 96, 148, 181, 255, 199, 218, 229, 255,
226, 236, 241, 255, 134, 177, 202, 255, 222, 234, 241, 255, 47, 125, 166, 255, 240, 245, 246, 255, 71, 162, 207, 255,
96, 123, 155, 255, 224, 225, 228, 255, 177, 177, 187, 255, 91, 178, 221, 255, 170, 195, 212, 255, 158, 188, 208, 255,
155, 185, 206, 255, 221, 232, 239, 255, 137, 174, 199, 255, 165, 194, 212, 255, 73, 135, 172, 255, 228, 237, 243, 255,
182, 210, 223, 255, 228, 236, 239, 255, 70, 158, 202, 255, 95, 123, 154, 255, 224, 225, 229, 255, 178, 178, 188, 255,
85, 175, 219, 255, 166, 193, 210, 255, 166, 194, 211, 255, 85, 137, 171, 255, 255, 255, 255, 255, 83, 137, 170, 255,
92, 143, 175, 255, 85, 140, 173, 255, 104, 154, 183, 255, 132, 173, 196, 255, 234, 238, 241, 255, 69, 153, 198, 255,
95, 123, 154, 255, 224, 226, 229, 255, 179, 178, 189, 255, 80, 171, 217, 255, 163, 192, 209, 255, 156, 188, 207, 255,
61, 121, 158, 255, 185, 207, 220, 255, 65, 123, 160, 255, 81, 135, 167, 255, 79, 134, 167, 255, 73, 131, 165, 255, 63,
124, 160, 255, 240, 242, 244, 255, 68, 151, 194, 255, 95, 122, 153, 255, 224, 226, 229, 255, 179, 178, 189, 255, 75,
167, 214, 255, 155, 188, 206, 255, 209, 224, 232, 255, 151, 184, 203, 255, 154, 186, 204, 255, 155, 185, 203, 255,
156, 187, 204, 255, 155, 185, 203, 255, 155, 185, 203, 255, 152, 184, 203, 255, 239, 242, 243, 255, 67, 147, 191,
255, 94, 122, 153, 255, 224, 226, 229, 255, 178, 177, 188, 255, 77, 168, 218, 255, 99, 155, 185, 255, 161, 194, 211,
255, 160, 193, 210, 255, 159, 191, 208, 255, 160, 191, 207, 255, 161, 189, 206, 255, 161, 189, 206, 255, 162, 189,
206, 255, 164, 191, 207, 255, 133, 166, 187, 255, 76, 159, 200, 255, 92, 121, 153, 255, 223, 225, 229, 255, 194,
194, 201, 255, 78, 140, 191, 255, 79, 164, 213, 255, 74, 158, 206, 255, 74, 157, 206, 255, 74, 157, 205, 255, 74,
157, 205, 255, 75, 156, 203, 255, 75, 156, 203, 255, 75, 156, 202, 255, 76, 156, 202, 255, 78, 158, 203, 255, 84,
167, 216, 255, 96, 114, 140, 255, 228, 230, 234, 255, 250, 251, 251, 255, 148, 154, 166, 255, 114, 123, 144, 255,
112, 121, 142, 255, 112, 121, 143, 255, 112, 121, 143, 255, 112, 122, 143, 255, 112, 122, 144, 255, 112, 122, 144,
255, 112, 122, 144, 255, 112, 122, 145, 255, 111, 122, 145, 255, 112, 121, 142, 255, 173, 179, 191, 255, 239, 240,
243, 255, 254, 254, 254, 255, 246, 247, 248, 255, 231, 234, 236, 255, 227, 229, 234, 255, 227, 229, 234, 255, 227,
230, 234, 255, 227, 229, 234, 255, 227, 229, 234, 255, 227, 229, 234, 255, 227, 229, 234, 255, 227, 229, 234, 255,
227, 230, 233, 255, 230, 232, 236, 255, 240, 242, 244, 255, 254, 254, 254, 255];
var canvas = document.createElement('canvas');
canvas.width="15";
canvas.height="16";
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var i = 0; i < canvasData.width; i++){
for(var j = 0; j < canvasData.height; j++){
var idx = (i + j * canvas.width) * 4;
canvasData.data[idx + 0] = colorArray[idx + 0]; // RED - красный
canvasData.data[idx + 1] = colorArray[idx + 1]; // GREEN - зелёный
canvasData.data[idx + 2] = colorArray[idx + 2]; // BLUE - синий
canvasData.data[idx + 3] = colorArray[idx + 3]; // ALPHA - альфа-канал
}
}
ctx.putImageData(canvasData, 0, 0);
[править] Примечания
[править] См. также
- WebGL — разрабатываемый стандарт отображения 3D графики в web браузерах
- SVG
- Сравнение браузеров
- HTML5
- CSS3
[править] Ссылки
- Спецификация от WHATWG
- Обучение основам canvas на сайте Mozilla Developer center
- Mozilla Canvas 3D
- Canvas reference page in Apple Developers Connection
- Canvas API
- Wii Opera SDK Canvas Library for Internet Gaming
- ExplorerCanvas
- Примеры использования

