21-05-2023
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).