Перейти к содержанию

HTML5


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

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

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

Хочу показать Вам ещё интересный пример на 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 по размеру исходника и возможно по производительности...

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

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

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

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

Пример

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

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

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

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

×
×
  • Создать...

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

Находясь на нашем сайте, Вы автоматически соглашаетесь соблюдать наши Условия использования.