Тег <canvas>

IE
9.0+
Chrome
6.0+
Opera
9.6+
Safari
3.1+
Firefox
4.0+
Android
2.1+
iOS
3.0+

Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.

<canvas id="идентификатор"></canvas>

Атрибуты

height: Задает высоту холста. По умолчанию 300 пикселов.
width: Задает ширину холста. По умолчанию 150 пикселов.

Пример

<!DOCTYPE html>
<html>
 <head>
  <title>canvas</title>
  <meta charset="utf-8">
  <script> 
  window.onload = function() {
    // Получим ссылку на элемент canvas по id.
	var elem = document.getElementById('holst');

	// Проверим свойства и методы на доступность для обратной совместимости со старыми браузерами
	if (elem && elem.getContext) {
	  var context = elem.getContext('2d');
	  if (context) {
		context.fillStyle = '#00f'; // цвет заливки
		context.strokeStyle = '#f00'; // цвет обводки
		context.lineWidth = 4; // толщина обводки
		// Теперь мы рисуем прямоугольники, задав координаты (x,y), а также его ширину и высоту
		context.fillRect(0, 0, 150, 100);
		context.strokeRect(0, 60, 150, 50);
	  }
	}
  }
  </script>
 </head>
 <body>
  <canvas id="holst" width="200" height="150">
    <p>Ваш браузер не поддерживает рисование.</p>
  </canvas>
 </body>
</html>

Результат примера показан на рисунке ниже:

Вывод рисунка с помощью тега canvas

Категория: HTML5, Изображения