Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Canvas html5 (https://javascript.ru/forum/offtopic/22639-canvas-html5.html)

Иваннн 27.10.2011 11:28

Canvas html5
 
Доброго времени суток.
Изучаю HTML5 по последней спецификации. Дошел до canvas. Есть несколько вопрпосов, ответы на которые не могу найти в интернете. А спецификацю до конца не понимаю.
1 вопрос. нарисовал два кружочка. применяю fill() как браузер снает что я хочу закрасить?. Думал применяется к отдельным path-ам да в примерах вообще без создания областей обходятся. Зачем нужны path-ы и closePath() только чтобы применять замыкание контура?
2 вопрос. если фигуру нарисовал, затем нарисовал другую фигуру. можно ли вернутся к первой и, например , закрасить ее?
Save и restore относятся лишь к матрице трансформации.
3. Про анимацию. неужели необходимо при каждой итерации перерисовывать ВЕСЬ холст применив единственный созданный для этого метод (clearRect).В LibCanvas? например создается отдельный слой (как? неужели еще один элемент canvas, накладываемый на первый ) думаю что нет.
Помогите разобраться!

dmitriymar 27.10.2011 11:36

1. читай ещё раз спецификацию. явно написано как закрашивать и как оставлять только контур.path-ещё раз читай спецификацию.-метод рисования относительно пред точки-как и везде
2 никак.
3. закрашивается всё одним цветом-прозрачным белым

Иваннн 27.10.2011 14:46

Т.е. полная перерисовка холста?
 
А если холст большой. сколько по времени займет?

Иваннн 27.10.2011 14:47

я хотел сказать - то же очень не удобно перерисовывать ВСЕ!! каждый кадр

Shock 09.11.2011 17:43

На самом деле есть дополнительные хитрости. Смотрите "Пятнашки на LibCanvas". Перерисовка пятнашек, которые остались на месте не происходит и слои не используются. Есть топик на Хабре, где описывается основная идея.

dmitriymar 11.11.2011 11:17

Цитата:

Сообщение от Shock
На самом деле есть дополнительные хитрости. Смотрите "Пятнашки на LibCanvas". Перерисовка пятнашек, которые остались на месте не происходит и слои не используются. Есть топик на Хабре, где описывается основная идея.

А хитрость в чём?
Способ есть гораздо проще-двигать фишку и позади её стирать/рисовать ещё одну пиксельную линию(при перемещении на 1 пиксел) равную ширине фишки.
И стирание, описанное у вас в этом случае лишнее,достаточно просто рисования.-уже операций жрущих кучу ресурсов в 2 раза меньше.
И вся ваша теория по этому поводу,расписанная на хабре на пару страниц, становится бесполезной:)

Shock 11.11.2011 11:54

Ну вы прям гений. Рассматриваете частный случай, когда на Хабре на примере частного случая описан общий. Основная идея - стираем старое место, рисуем новое. С пятнашкой нестандартной формы (например, круглой) ваша идея с одним пикселем вообще не подходит.

dmitriymar 11.11.2011 12:07

Цитата:

Сообщение от Shock
Ну вы прям гений. Рассматриваете частный случай, когда на Хабре на примере частного случая описан общий. Основная идея - стираем старое место, рисуем новое. С пятнашкой нестандартной формы (например, круглой) ваша идея с одним пикселем вообще не подходит.

Боюсь что пройдёт-поскольку круглая фишка с соседней условно соприкасается в одной точке и сохранённое изображение всёравно будет прямоугольник, при однотонном фоне и движении вдоль осей предметов ,без пересечения их- это как раз общий случай.
Да и на счёт того что описываете общий не согласен.Нет и близко общего в этом частном случае.
С тем что, реализацию общего неправильную описываете согласен на все 100.

Shock 15.01.2012 23:25

Необходимо стирать минимум половину круга.
Если объект полупрозрачный, то стирать обязательно весь.

dmitriymar 16.01.2012 00:41

Цитата:

Сообщение от Shock
Необходимо стирать минимум половину круга.
Если объект полупрозрачный, то стирать обязательно весь.

Расстрою, дело в том что круг как и прямоугольник вставляться прямоугольной областью,если к этому правильно подойти :)
По поводу полупрозрачности,прозрачн сти есть параметры наложения,определяющие как накладываемое будет затирать предыдущее -и если вы о них не знаете,не знаете как использовать-мне жаль вас.Помимо этого есть ещё варианты.

Дело не в том что стирать и тому подобное-яркий пример пятнашки изменение на общий случай и на 40-50% быстрее,а если ещё по уму всё делать,то...
Не считаю LibCanvas чем то жутко оригинальным и т.д. тем более -использовать одну канву,а не слоённую канву считаю глупостью как минимум. Да и для движущихся элементов никто не отменял комбинирование с контейнерами и CSS,картами,SVG...
Тем более непонятен ажиотаж связанный с созданием 2х мерных игр и подобного на канве. SVG гораздо больше для этих целей подходит,да есть свои нюансы,но в конечном итоге инструментарий больше,чего стоит возможность создавать для объектов обработчики,чего не скажешь о канве.
Опять,не говорю что SVG всегда лучше чем канва,всё зависит от задачи.
Я считаю,что вы с пропагандой своей библиотеки,мало того,что она очень не функциональна(выше описано почему,CSS и т.д),так вы ещё и не в ту сторону всех направляете.
Именно SVG создавалась для создания игр и подобного,а всё ваше творчество могу сравнить только с попыткой пить чай вилкой.


Часовой пояс GMT +3, время: 09:52.