Тег <canvas>
Описание
Создает область, в которой можно рисовать объекты при помощи JavaScript. Чаще всего используется при создании игр.
Для элемента доступны универсальные атрибуты и события.
См. код языков. См. MIME - типы.
Синтаксис
<canvas id='идентификатор'></canvas>Атрибуты
Пример
<!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>Читайте также
Тег <figure>
Создает контейнер для изображений с необязательным заголовком. Семантический тег....
Тег <datalist>
Выпадающий список для тега input, который появляется при наведении курсора мыши на данный input ( на пк ) или при нажатии на стрелку рядом ( на мобиль...
Тег <li>
Тег li элемент списка ul и ol....
Тег <data>
Предназначено для внешних автоматизированных систем или скриптов на страничке, представляющее собой содержимое читаемое машинами.
В нем может хран...