Графика Canvas HTML
Элемент <canvas> используется для рисования графики на веб-странице, такой как прямоугольники, градиенты и текст.
Что Такое HTML Canvas?
Элемент <canvas> используется для рисования графики «на лету» с помощью JavaScript. Сам элемент — лишь контейнер; для собственно рисования нужно использовать JavaScript. У Canvas есть методы для рисования путей, прямоугольников, кругов, текста и изображений, и он поддерживается всеми основными браузерами.
Примеры Canvas
Canvas — это прямоугольная область на странице. По умолчанию у неё нет ни границы, ни содержимого.
Примечание: Всегда задавайте ему id (чтобы обращаться к нему в скрипте), а также атрибуты width и height, чтобы задать его размер. Чтобы добавить границу, используйте атрибут style.
Пример
Базовый, пустой canvas с границей.
Prompt
Страница с базовым пустым canvas 200x100 (id myCanvas), которому через атрибут style задана сплошная чёрная рамка 1px.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пустой Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
</body>
</html>
Разметка canvas
Базовая разметка для элемента canvas.
index.html
<canvas id="myCanvas" width="200" height="100"></canvas>
Добавление JavaScript
После создания области canvas добавьте JavaScript для рисования. Получите canvas с помощью getElementById, затем вызовите getContext("2d"), чтобы получить контекст рисования, и используйте его методы. Вот несколько примеров.
Рисование Линии
Рисование линии с помощью moveTo, lineTo и stroke.
Prompt
Страница с canvas 200x100 и скрипт, который рисует линию от (0,0) до (200,100) с помощью getContext('2d'), moveTo, lineTo и stroke.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Рисование Линии</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Ваш браузер не поддерживает тег HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
</body>
</html>
Рисование Круга
Рисование круга с помощью arc и stroke.
Prompt
Страница с canvas 200x100 и скриптом, который рисует круг с центром в точке (95,50) радиусом 40 с помощью arc и stroke.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Рисование Круга</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Ваш браузер не поддерживает тег HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
Рисование Текста
Рисование заполненного текста с помощью fillText.
Prompt
Страница с canvas 200x100 и скрипт, который рисует закрашенный текст "Привет, мир" шрифтом 30px Arial в позиции (10,50) с помощью fillText.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Рисование Текста</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Ваш браузер не поддерживает тег HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Привет, мир", 10, 50);
</script>
</body>
</html>
Текст с Обводкой
Рисование текста с контуром с помощью strokeText.
Prompt
Страница с canvas 200x100 и скрипт, который рисует контурный текст "Привет, мир" шрифтом 30px Arial в позиции (10,50) с помощью strokeText.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Контурный Текст</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Ваш браузер не поддерживает тег HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Привет, мир", 10, 50);
</script>
</body>
</html>
Рисование Линейного Градиента
Заливка прямоугольника линейным градиентом.
Prompt
Страница с canvas 200x100 и скрипт, который заполняет прямоугольник горизонтальным линейным градиентом от красного к белому.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Линейный Градиент</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Ваш браузер не поддерживает тег HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Создаём градиент
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Заполняем градиентом
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
Рисование Кругового Градиента
Заливка прямоугольника радиальным градиентом.
Prompt
Страница с canvas 200x100 и скриптом, который заполняет прямоугольник радиальным (круговым) градиентом от красного к белому.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Круговой Градиент</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Ваш браузер не поддерживает тег HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Создаём градиент
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Заполняем градиентом
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
Рисование Изображения
Рисование существующего изображения на canvas с помощью drawImage.
Prompt
Страница со скрытым изображением (id scream) и canvas 200x100, а также скрипт, который рисует изображение на canvas в позиции (10,10) с помощью drawImage.
Вывод: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Рисование Изображения</title>
</head>
<body>
<p>Используемое изображение:</p>
<img id="scream" src="img_the_scream.jpg" alt="Крик" style="display:none;">
<p>Canvas:</p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Ваш браузер не поддерживает тег HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
</body>
</html>