Элементарный Canvas

[sfi0zy]

Думаю лучше все-таки в статьи вставлять код в виде кода, а не картинками.

[Maklaud]

Код в виде кода скопируют и забудут, а с картинки придется напечатать вручную — лучше усвоится :)

Пример с гравитацией просто офигенный, автор молодец!

[StrangerInTheKy]

Код на картинке нельзя найти по ctrl+F!
Читаешь-читаешь длинную статью, потом в конце статьи «а помните в начале мы использовали функцию my_stupid_function_on_picture»… Да-да, помню, сейчас пролистаю наверх и прочитаю все надписи на картинках еще раз, но очень-очень внимательно…

[EpicLegend_gg]

Сужу по себе, код из статьи я копирую… я не пишу его сам. А потом и удивляюсь… а почему я не понимаю то, что якобы написал… Вот из-за этого и картинки вставил.

[AngReload]

На некоторых числах if(options.hue == 360) options.hue = 0; никогда не выполнится, надо использовать >=.
И это условие должно идти после сложения.
Цвет в любом случае меняется, hue == 361 будет интерпретирован как hue == 1, но всё-таки это ошибка.
Лучше использовать остаток от деления:

options.hue += 1 / options.divisionSpeed;
options.hue %= 360;

[EpicLegend_gg]

Спасибо. Насчет >= верно(эта погрешность осталась от того момента, когда я использовал целые числа), но % здесь не нужен. Да и менять перед проверкой также лишнее т.к. результат будет идентичный тому, который есть сейчас.

[Zenitchik]

Переменные width и height нам потребуются дальше.

В глобальном пространстве имён? Вы серьёзно?

Также не забудьте вызвать функцию ReSize после получения контекста canvas'а.

Зачем? Она же не работает с контекстом.

[EpicLegend_gg]

Я не пишу библиотеку, которой потом «возможно» будут пользоваться. Это простой пример. Лучше допускать ошибки, чем не писать вовсе код.

ReSize нужно один раз вызвать перед основным циклом т.к. он установит нужные размеры канвасу и обновит значения переменных width и height

[Zenitchik]

Это простой пример.

Сразу содержащий плохой пример…

Лучше допускать ошибки, чем не писать вовсе код.

Как PET-проект — может быть, но не как совет другим.

ReSize нужно один раз вызвать перед основным циклом

Именно, и это не обязательно

после получения контекста canvas'а.

Я лично рекомендую его запускать сразу после загрузки страницы.

[Keyten]

Да не так уж и плохо, например в jsfiddle в маленьких демках тоже вполне допустимо юзать глобальные переменные типа width / height.

[tamerlan676]

На сервисе udacity есть курс по Canvas. Вполне себе достойный.

[noodles]

ищите "Сценарии использования canvas и SVG"

[amazed]

Если вас заинтересовал canvas, то самое время продолжить изучение этой технологии.

1. Функции для рисования графики были и есть в любой мало-мальски развитой среде разработки, начиная с бейсика или Турбо-паскаля в 80-ых.
2. Эти функции для рисования во всех средах реализуются почти одинаковым и очевидным образом, Canvas — не исключение.
3. Для освоения функций рисования графики в любой среде разработки, достаточно почитать документацию с пол-часа.
На фоне всего этого про Canvas периодически пишут статьи, в которых Canvas подается как новая крутая технология а не в духе «основы программирования для чайников».
Та же тенденция наблюдалась и в других случаях веб-разработки: «революционный» json (мы можем просто перечислить поля объекта через запятую!), прорывной Ajax (мы можем запросить данные с сервера!), REST…

Я к чему это все. Уважаемые начинающие веб-программисты, поймите, что вещи уровня Canvas, Json, Ajax — это очень очень просто и очевидно. Важность и новизна подобных «технологий» заключалась в том, чтобы ввести их в браузер, который является достоянием всего человечества. Сами по себе они тривиальны.

[EpicLegend_gg]

Так а кто спорит? Я полностью с вами согласен.
Нет на ру сегменте нормального образования.(ну или я их не встречал) За основы программирования подаются переменные, функции, ветвление, циклы.

[Zenitchik]

Важность и новизна подобных «технологий» заключалась в том, чтобы ввести их в браузер, который является достоянием всего человечества

Так статьи и пишутся про их реализацию в браузере. Будь они хоть трижды тривиальны, но чтобы применить конкретную их реализацию — нужно знать API пресловутой реализации.
То же самое могу сказать об Ajax.

Что же касается данной конкретной статьи — ценность её нулевая, потому что то же самое легко находится поиском по Хабру, причём лучше написанное (и, что характерно, очень давно).

[StrangerInTheKy]

opacity — скорость с которой наши элементы будут затираться на canvas'e

Opacity — это непрозрачность, а не скорость.

[set]

fps — думаю объяснять не нужно для чего… правда работает странно…

Думаю, объяснять надо. Я так и не понял, где именно используется это свойство. Оно объявлено, но нигде не вызывается.

ctx.fillStyle позволяет задать цвет заливки, а ctx.fillRect(точка x, точка y, ширина, высота) позволяет нарисовать фигуру. Задаем рандомную высоту с шириной, но в диапазоне наших размеров.

В описании вы говорите о задании рандомных размеров, но ведь в коде написаны рандомные координаты, но статичные размеры. Где ошибка-то? В описании или в реализации?

[Bhudh]

Просто во фразе «Задаем рандомную высоту с шириной» автором разумеются координата x («ширина») и координата y («высота»).

[set]

Простите, но зачем же подменять понятия? Ведь в цитируемом сообщении автор изначально указывает, какие свойства передаются методу и в какой очерёдности — «точка x, точка y, ширина, высота». И практически сразу же пишет о рандомной ширине и высоте.