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

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

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

HTML5 + Box2d. Подключаем физический движок.



Некоторые из вас возможны знакомы с самим физическим движком Box2d, который портирован на различные платформы и стал особенно популярный на платформе Flash. Так вот, Box2d отныне портирован и на JS, но по правде сказать это автоматический конверт с Box2DFlashAS3_1.4.3.1.

Вкратце, Box2d — это двухмерный физический движок, с помощью его мы и попробует сделать игру на HTML5. Все исходники и примеры доступны для скачивания:
Читать дальше →

Rocket Engine - Canvas HTML5 & JavaScript игровой движок



Rocket Engine — новый инструмент для разработчика игр на HTML5 и JavaScript. «Rocket Engine Builder — Это как Google Docs но для игр» — заверяют нас разработчики. Релиз платформы пока еще не состоялся но у компаний-игроделов есть шанс получить бета-подписку. Особенности движка, как подчеркивают девелоперы, это то, что созданная вами игра не зависит от браузеров и не требует никаких дополнительных плагинов, поддержка IE8 — гарантирована.

http://rocketpack.fi

Изучаем 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

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

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



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

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

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

RGraph - графическая библиотека HTML5 canvas для построения графиков



RGraph — js библиотека, с помощью которой можно быстро и удобно строить графики и диаграммы на html5 canvas. Из особенностей можно выделить интеграцию c server-side скриптами и дополнительные возможности вроде zoom, tooltips и пр. Виды графиков:

  • круговые
  • столбиковые(вертик. и горизонтальные)
  • цилиндрические
  • кольцевые
  • линейные
  • диаграмма Gantt'a
  • в виде прогрес бара и др.

Поддерживается браузерами:

  • Mozilla Firefox 3.0+
  • Google Chrome 1+
  • Apple Safari 3+
  • Opera 9.5+
  • Microsoft Internet Explorer 8+ (see note)
  • iPhone (text support from iOS v4+)
  • iPad (text support from iOS v4.2+)



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