Тег <canvas>
Описание
Создает область, в которой можно рисовать объекты при помощи JavaScript. Чаще всего используется при создании игр.
Для элемента доступны универсальные атрибуты и события.
См. код языков.
См. MIME - типы.
Синтаксис
<canvas id='идентификатор'></canvas>| Internet Explorer | Edge | Chrome | Opera | Safari | Firefox | Android WebView | Firefox для Android | Opera для Android | iOS Safari |
| 9 | 12 | 1 | 9 | 2 | 1.5 | 2.1 | 2 | 9 | 2 |
| Поддерживается | Частичная поддержка | Не поддерживается |
Устаревшие атрибуты
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<canvas style='background-color: lightblue;' id='smile' width='200' height='200'>
<p>Canvas не поддерживается браузером.</p>
</canvas>
<script>
var drawingCanvas = document.getElementById('smile');
if(drawingCanvas && drawingCanvas.getContext) {
var context = drawingCanvas.getContext('2d');
// Рисуем окружность
context.strokeStyle = '#000';
context.fillStyle = '#ffcd03';
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Рисуем левый глаз
context.fillStyle = '#000000';
context.beginPath();
context.arc(84,90,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Рисуем правый глаз
context.beginPath();
context.arc(116,90,8,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();
// Рисуем рот
context.beginPath();
context.moveTo(70,115);
context.quadraticCurveTo(100,130,130,115);
context.quadraticCurveTo(100,150,70,115);
context.closePath();
context.stroke();
context.fill();
}
</script>
</body>
</html>Читайте также
Тег <dt>
Тег dt используется при создании списка dl и создает элемент с названием термина, который будет о...
Тег <figcaption>
Заголовок для figure.
Тег <col>
Задает столбец в таблице и используется для стилизации ячеек.
Тег <em>
Задает акцент для фрагмента текста. Семантический тег.
Тег <aside>
Представляет раздел страницы, который можно рассматривать отдельно от документа. Чаще всего элеме...