HTML Canvas

HTML элемент <canvas> используется для отрисовки графики на веб‑странице.

---

Графика ниже создана с помощью <canvas>. Она показывает четыре элемента: красный прямоугольник, прямоугольник с градиентом, многоцветный прямоугольник и многоцветный текст.

---

Что такое HTML Canvas?

HTML элемент <canvas> используется для динамической отрисовки графики с помощью JavaScript.

Элемент <canvas> — это лишь контейнер для графики. Чтобы фактически нарисовать графику, необходимо использовать JavaScript.

Canvas предоставляет несколько методов для отрисовки контуров, прямоугольников, кругов, текста и добавления изображений.

Canvas поддерживается всеми основными браузерами.

---

Примеры использования Canvas

Canvas — это прямоугольная область на HTML‑странице. Еще эту область называют «холст». По умолчанию холст не имеет границы и содержимого.

Разметка выглядит следующим образом:

<canvas id="myCanvas" width="200" height="100"></canvas>

Примечание: Всегда указывайте атрибут id (чтобы на него можно было сослаться в скрипте), а также атрибуты width и height, чтобы задать размер холста. Чтобы добавить границу, используйте атрибут style.

Вот пример базового пустого холста:

Ваш браузер не поддерживает элемент <canvas>.

Пример

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

---

Добавление JavaScript

После создания прямоугольной области холста необходимо добавить JavaScript‑код для выполнения отрисовки.

Ниже приведены несколько примеров:

Отрисовка линии

Ваш браузер не поддерживает элемент <canvas>.

Пример

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

---

Отрисовка круга

Ваш браузер не поддерживает элемент <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>

---

Отрисовка текста

Ваш браузер не поддерживает элемент <canvas>.

Пример

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

---

Контурный текст

Ваш браузер не поддерживает элемент <canvas>.

Пример

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

---

Отрисовка линейного градиента

Ваш браузер не поддерживает элемент <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>

---

Отрисовка кругового градиента

Ваш браузер не поддерживает элемент <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>

---

Отрисовка изображения

Пример

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>