<canvas>
Создаёт область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи элемента <canvas>
можно создавать рисунки, анимацию, игры и др.
Закрывающийся тег:
Обязателен
Поддержка:
HTML4 и выше
Атрибуты:
height - Задаёт высоту холста. По умолчанию 300 пикселей.
width - Задаёт ширину холста. По умолчанию 150 пикселей.
Также для этого элемента доступны универсальные атрибуты и события.
Пример:
<html> <head> <title>canvas</title> <meta charset="utf-8"> <script> window.onload = function() { var drawingCanvas = document.getElementById('circle'); if(drawingCanvas && drawingCanvas.getContext) { var context = drawingCanvas.getContext('2d'); // Рисуем окружность context.strokeStyle = "#9400D3"; context.fillStyle = "#FF00FF"; context.beginPath(); context.arc(200,150,50,0,Math.PI*2,true); context.closePath(); context.stroke(); context.fill(); } } </script> </head> <body> <canvas id="circle" width="500" height="200"> <p>Ваш браузер не поддерживает рисование.</p> </canvas> </body> </html>