Canvas (англ. canvas — «холст») — элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript.
Содержание |
Впервые элемент canvas был представлен компанией Apple в движке WebKit для Mac OS X с целью последующего его использования в приложениях Dashboard и Safari.
Поддержка canvas в 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)
'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);
Canvas (HTML).