HTML5

MasterGH · 17 августа, 2011

Веб-технологии не стоят на месте. Хочу показать пример того, что можно сделать на HTML5.

<html> 
  <head>
      <title>Дерево Пифагора</title>
      <script type="text/javascript">
        // функция рисует под углом линию из указанной точки длиной ln
        function drawLine(x, y, ln, angle) {
          context.moveTo(x, y);
          context.lineTo(Math.round(x + ln * Math.cos(angle)), Math.round(y - ln * Math.sin(angle)));
        }
        // Функция рисует дерево
        function drawTree(x, y, ln, minLn, angle) {
          if (ln > minLn) {
              ln = ln * 0.75;
              drawLine(x, y, ln, angle);
              x = Math.round(x + ln * Math.cos(angle));
              y = Math.round(y - ln * Math.sin(angle));
              drawTree(x, y, ln, minLn, angle + Math.PI/4);
              drawTree(x, y, ln, minLn, angle - Math.PI/6);
              // если поставить угол Math.PI/4 , то выйдет классическое дерево
          }
        }
        // Инициализация переменных
        function init() {
          var canvas = document.getElementById("tree");
          context = canvas.getContext("2d");
          canvas.width = 480; // Ширина холста
          canvas.height = 320; // высота холста
          var x = canvas.width / 2;
          var y = canvas.height;
          var ln = 120; // начальная длина линии
          var minLn = 4; // минимальная длина до которой рисуются линии
          context.fillStyle = "#ddf"; // цвет фона
          context.strokeStyle = "#020"; //цвет линий
          context.fillRect(0, 0, canvas.width, canvas.height);
          context.lineWidth = 2; // ширина линий
          context.beginPath();
          drawTree(x, y, ln, minLn, Math.PI / 2);
          context.stroke();
        }
      </script>
  </head>
  <body onload="init();">
    <canvas id="tree"></canvas>
  </body> 
</html>

Скажем спасибо элементу "canvas". Так же я был удивлён, что новый стандарт имеет поддержку многопоточности. Если Вы хотите подробностей, то посмотрите их в Интернете.

MasterGH · 18 августа, 2011

Хочу показать Вам ещё интересный пример на HTML5:

Когда кликаете мышкой на видео, то оно рассыпается.

Только я не понял зачем было именно такое описание типа документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Помимо всего яваскрипта, самые интересные теги:


	<div style="display:none">
		<video id="sourcevid" autoplay="true" loop="true">
			<source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>
			<source src="BigBuckBunny_640x360.ogv" type="video/ogg"/>
		</video>
		<canvas id="sourcecopy" width="640" height="360"></canvas>
	</div>
	<div><center>
		<div style="z-index:1;position:relative;text-align:center;font-size:16px;font-weight:bold;width:1000px;top:60px;">Click video to blow it up!</div>
		<canvas id="output" width="1000" height="600" onmousedown="dropBomb(event, this)" style="border: solid 5px #666666"></canvas>

Я невольно задумался какая конкуренция между HTML5, Silverlight, Adobe Flash. Сразу увидел достоинства последних. Яваскрипт в HTML5 сильно проигрывает C#, ActionScript последних версий. Яваскрипт текущей версий это серьёзный тормоз в HTML5 по удобству программирования против ООП на C#, ActionScript.... В случае последнего не знаю. Зато знаю козыри Silverlight- это привязка данных по свойствам зависимости + ООП с кодбихайндом + заммель разметка для проектирования интерфейса.... Только данный пример на HTML5 значительно выигрывает у Silverlight по размеру исходника и возможно по производительности...

Xipho · 18 августа, 2011

Еще один плюс в сторону HTML5 - он не требует каких-либо сторонних надстроек, а нужен всего лишь современный браузер, в то время как Microsoft Silverlight и Adobe Flash требуют надстроек для выполнения своего кода. В этом плане Flash более распостранен, но я могу сказать, что принципы программирования на ActionScript 3.0, хоть и весьма отличаются от программирования на ActionScript 2.0 в лучшую сторону, все равно вызывают у меня некоторое недоумение (те, кто стал осваивать ActionScript 3.0 после какого-либо другого языка программирования, те меня поймут).

MasterGH · 18 августа, 2011

Повторяющаяся музыка при запуске и до загрузки сайта.

Пример

<audio src="http://mastergh.gamehacklab.ru/sound.ogg" controls autoplay autobuffer loop>Ваш браузер не поддерживает теги <audio> </audio>! Обновите версию браузера!</audio>

Вы увидите плеер. Можно остановить музыку. Убавить громкость. Установить позицию проигрывания.

Мой сайт с музыкой

Войти

HTML5

Рекомендуемые сообщения

MasterGH

Ссылка на комментарий

Поделиться на другие сайты

MasterGH

Ссылка на комментарий

Поделиться на другие сайты

Xipho

Ссылка на комментарий

Поделиться на другие сайты

MasterGH

Ссылка на комментарий

Поделиться на другие сайты

Обзор

Активность

Важная информация