Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <canvas>



Пример

Нарисуйте красный прямоугольник на лету и покажите его внутри элемента <canvas>:

<canvas id="myCanvas">
Ваш браузер не поддерживает тег canvas.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
Попробуйте сами »


Определение и использование <canvas>

Тег <canvas> используется для рисования графики, на лету,с помощью сценариев (обычно JavaScript).

Тег <canvas> прозрачен и является только контейнером для графики,вы должны использовать скрипт, чтобы фактически нарисовать графику.

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


Совет: Узнайте больше об элементе <canvas> в разделе HTML Canvas учебник.

Совет: Для получения полной справки обо всех свойствах и методах, пожалуйста, посетите HTML Canvas справочник.


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

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

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

Атрибуты <canvas>

Атрибут Значение Описание
height pixels Указывает высоту canvas. Значение по умолчанию 150
width pixels Указывает ширину canvas значение по умолчанию равно 300

Глобальные атрибуты <canvas>

Тег <canvas> также поддерживает Глобальные атрибуты в HTML.


События атрибутов <canvas>

Тег <canvas> также поддерживает События атрибутов в HTML.


Еще примеры <canvas>

Пример

Другой <canvas> пример:

<canvas id="myCanvas">
Ваш браузер не поддерживает тег canvas.
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Включите прозрачность
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
Попробуйте сами »

Настройки CSS по умолчанию <canvas>

Большинство браузеров будут отображать элемент <canvas> со следующими значениями по умолчанию:

Пример
canvas {
  height: 150px;
  width: 300px;
}
Попробуйте сами »