САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML Canvas



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

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

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


Что такое canvas HTML?

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

Элемент <canvas> - это только контейнер для графики. Для рисования графики необходимо использовать JavaScript.

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


Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает элемент <canvas>.

Элемент
<canvas> 4.0 9.0 2.0 3.1 9.0

Пример 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>
Редактор кода »

Нарисовать линию

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

Пример

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Редактор кода »

Нарисовать круг

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

Пример

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Редактор кода »

Нарисовать текст

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

Пример

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Привет Мир", 10, 50);
Редактор кода »

Штрих текста

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

Пример

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Привет Мир", 10, 50);
Редактор кода »

Нарисовать линейный градиент

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

Пример

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);
Редактор кода »

Нарисовать круговой градиент

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

Пример

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);
Редактор кода »

Нарисовать изображение

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
Редактор кода »

Учебник по холсту HTML

Чтобы узнать все о <canvas> HTML, посетите наш полный учебник Холст HTML.