Официальный логотип HTML5

Порою я задумывался, какой же логотип использовать применительно к html5. Просмотрев сайты, посвященные html5, понял что каждый рисует логотип во что горазд, нет стандартизированного. Наконец-то HTML5 получил официальный логотип! Любуйтесь:



Так же доступ в виде виджета с иконками поддерживаемых html5 технологий:




Логотип распространяется по лицензии CC 3.0. Скачать\глянуть здесь

Изучаем Canvas. Урок №2 - Рисуем линии и кривые

Линия задается двумя точками на плоскости, для того чтобы в нашем теге canvas нарисовать линию нам понадобятся:

moveTo(x,y);
lineTo(x,y);
stroke();

moveTo(x,y) — это метод, который определяет начальное положение курсора, исходное положение
lineTo(x,y) — создает связь между исходным положением и заданным, прокладывает вектор
stroke() — рисует по заданному пути линией. По умолчанию — черной, толщиной в 1 пиксель.

<html>
<head>
<script>
 
function drawLine() {
	var canvas=document.getElementById("myCanvas");
	var line=canvas.getContext("2d");
 
	line.moveTo(100,100);
	line.lineTo(200,200);
	line.stroke();	
}
 
</script>
</head>
<body onload="drawLine()">
	<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>

Рассмотрим свойства, которыми мы можем наделить нашу прямую:

Читать дальше →
  • нет
  • avatar
  • 0
  • 0

Canvas шаг за шагом: основы

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.

Читать дальше →

Изучаем Canvas - тег который рисует все. Вводный урок №1

Canvas это такой же тег как div или table, но подразумевает другие вещи, а именно указывает, что его содержимое будет отображаться не без помощи JavaScript. Другими словами, чтобы использовать HTML5 Canvas, вам нужно добавить сам тег в HTML и создать вызывающую JavaScript функцию, которая обращается к canvas тегу, как только страничка загрузиться и использует HTML5 Canvas API для визуализаций.

<html>
<head>
<script>
 
function init() {
	var canvas=document.getElementById("myCanvas");
	var c=canvas.getContext("2d");

}
 
</script>
</head>
<body onload="init()">
	<canvas id="myCanvas" width="576" height="300">
             Ваш браузер не поддерживает Canvas.
        </canvas>
</body>
</html>

Это в принципе и все. Так будут начинаться любые ваши проекты с использованием Canvas API. Можно определить высоту и ширину canvas тега используя стандартные height и width параметры, как в других HTML5 тегах. onload event в теге body вызывает canvas тег. Внутри функции init() мы имеем доступ к canvas DOM элементу по его id(важно его указать), задаем так же getContext — 2d

На этом первый вводный урок закончен.

Векторные иконки на HTML5 + JS



На первый взгляд это обычные одноцветные иконки, но если призумить — их качество не ухудшиться. Очевидный профит таких иконок: с ними можно свободно экспериментировать и не переживать за высоту и ширину, компактный вид, а не куча файлов в папке icons, ну и наверное маленький размер, хотя с этим поспорить можно. Есть некоторые ограничители в цвете, возможен один цвет либо градиент (но думаю с конвертером нарисованного вектора в js код, возможно и больше цветов)

Смотреть иконки

Если вы хотите использовать эти иконки или создавать свои на подобной основе, кликайте по иконке — внизу появится код выбранной иконки, он вставляется в:

paper.path(<код иконки>).attr({fill: "#000", stroke: "none"});


Поддержку иконок на себя берет Rapha?l JS Lib

Релиз Impact JS Game Engine - 99$



Сегодня состоялся релиз Impact JS, дважаскриптовый движок, который в взаимодействии с html5 canvas позволит вам создавать игры. Пример такой игры — Biolab Disaster

Немного огорчает стоимость лицензии — 99$. Но уверен в скором будущем появятся бесплатные альтернативы.

Видео по созданию игры на Impact