MasterGH

HTML5

4 сообщения в этой теме

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

post-3-1313603340,11_thumb.png

<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". Так же я был удивлён, что новый стандарт имеет поддержку многопоточности. Если Вы хотите подробностей, то посмотрите их в Интернете.

0

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

post-3-1313646883,87_thumb.png

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

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

<!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 по размеру исходника и возможно по производительности...

0

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

0

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

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

Пример

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

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

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

0

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас