Серверное время 2017-10-18 15:55:16
Приветствую вас, Гость
Понравился сайт - нажми CTRL+D и добавь в закладки..
Теги HTML
HTML5
Атрибуты тегов
Значения
Статистика
Яндекс.Метрика
Реклама
Реклама

Тег <canvas>

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
10.5
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Не поддерживается
Не поддерживается
Не поддерживается
Полная поддержка
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Краткая информация
HTML: 3.2 4.01 5.0
XHTML: 1.0 1.1  
Описание
Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры и др.
Синтаксис
<canvas id="идентификатор">
</canvas>
Атрибуты
height - Задает высоту холста. По умолчанию 300 пикселов.
width - Задает ширину холста. По умолчанию 150 пикселов.
Закрывающий тег
Обязателен.
Пример. Использование тега <canvas>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>canvas</title>
<script type="text/javascript">
 window.onload = function() {
 var drawingCanvas = document.getElementById('smile');
 if(drawingCanvas && drawingCanvas.getContext) {
  var context = drawingCanvas.getContext('2d');
  // Рисуем окружность
  context.strokeStyle = "#000";
  context.fillStyle = "#fc0";
  context.beginPath(); context.arc(100,100,50,0,Math.PI*2,true);
  context.closePath();
  context.stroke();
  context.fill();
  // Рисуем левый глаз
  context.fillStyle = "#fff";
  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>
</head>
<body>
 <canvas id="smile" width="200" height="200">
  <p>Ваш браузер не поддерживает рисование.</p>
 </canvas>
</body>
</html>

Демонстрация примера
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (0)
Имя
Email
Осталось 65535 символов
© 2006-2012, Home-test.biz