ArtemSmirnov May 16 2011 at 15:15

Еще одно Canvas руководство [3]: Рисование изображений и текста, сохранение изображения и состояния

3 min

5.5K

Canvas*

+21

Comments 20

ckald May 16 2011 at 16:48

«Если какое-то свойство контекста изменить то оно повлияет на все последующие, для упрощения жизни разработчикам в спецификации есть два метода контекста save и restore.»

Такие вещи только мне кажутся признаком сырости и непродуманности API? Пользоваться, несомненно, можно, но как-то это странно

TheShock May 16 2011 at 18:52

С чего бы это?

ckald May 16 2011 at 19:27

Ну это как с работой с базой данных. Можно писать sql-запросы напрямую, но можно сделать обертку вроде ActiveRecord из CodeIgniter — ничего сложного, только поддержка chaining'а, «накопление» данных для запросов и лучшая интеграция с остальным кодом. А если и это покажется не слишком удобным — мы придем к object-mapping со всеми вытекающими.

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

style1 = ctx.createTextStyle({font:"bold italic 30px sans-serif", align:"center",color:"#f00"});

style2 = ctx.createTextStyle({rotation:45});



ctx.putText("Чуть более инкапсуляриваный код", 300,400,style1);

ctx.putText("Чуть более гибкий код", 300,500);

ctx.putText("Чуть более повернутый код", 300,600,style2);

ckald May 16 2011 at 19:31

А еще когда-нибудь можно было бы присоеденить сюда нечто вроде CSS-разметки для стилей.

TheShock May 16 2011 at 19:35

Тоже через фреймворк. У меня была мысль реализовать такое, но не дошли руки ещё.

TheShock May 16 2011 at 19:34

Используйте для этого фреймворк) canvas.getContext('2d-libcanvas'), смотрите «Метод text»:

context.text({
  text  : 'Text',
  size  :  30,
  family: 'monospace',
  align : 'center'
});

ckald May 16 2011 at 19:41

Фантастика, но этот ваш фреймворк построен на другом вашем. Фреймворки гениальны, для обеспечения широкого функционала они творят страшные вещи с DOM — как-то его расширение, что приводит к тормозам. Меня очень беспокоит идея написания приложений на основе canvas для мобильных устройств. Быстродействие решает. Хотя сейчас на мобильном телефоне проецессор стоит лучше, чем на моем первом компьютере.

TheShock May 16 2011 at 19:46

Фантастика, но этот ваш фреймворк построен на другом вашем

Ну да, это разве плохо?)

TheShock May 16 2011 at 19:47

они творят страшные вещи с DOM — как-то его расширение, что приводит к тормозам.

Не замечал… О чем вы?

Меня очень беспокоит идея написания приложений на основе canvas для мобильных устройств. Быстродействие решает. Хотя сейчас на мобильном телефоне проецессор стоит лучше, чем на моем первом компьютере.

Конечно, на мобильнике есть свои особенности, но вполне сносно)

ckald May 16 2011 at 20:04

Ну вы же не скажете, что от добавления полсотни свойств и нескольких десятков методов каждому объекту на странице она станет работать быстрее? :)

TheShock May 16 2011 at 20:06

Ей будет пофиг, честно)

ckald May 16 2011 at 20:18

Гугл ничего мне не сказал на этот счет, но если так — все мои представления о структуре мира содрогаются. Есть ли доказательства?

TheShock May 16 2011 at 20:28

Придётся поверить на слово или провести собственные тесты)

Вот код тестов. Сначала тестим «чистый массив», вызывая методы push, indexOf, lastIndexOf, потом добавляем в прототип 27 методов и снова тестим массив, но уже с расширенным прототипом. Второй кусок у меня даже быстрее выполняется, хотя это, конечно, просто погрешность.

ckald May 16 2011 at 20:52

:( Ну и как с вами теперь спорить?)) Тогда остается только повышенное выделение памяти при использовании фреймворков, но это не важно. Спасибо, просветили. Как раз вынашивал планы убрать jQuery из одного проекта.