Разумно ли использовать Processing.js Джона Ресига?

Если вы согласны с тем, что он не работает в IE7, сделайте это. У меня он работал в Firefox 3. Это отличный способ добавить эффекты Silverlight / Flash на вашу страницу.

Я подозреваю, что библиотеки, такие как Processing.js, будут быстро меняться или обновляться, поэтому будьте готовы к запуску, когда они это сделают, и не отставайте от новых функций.

Я бы сказал, что вместо этого используйте Flash. Flash установлен в большем количестве браузеров, чем в том количестве браузеров, которые работают с processing.js. Кроме того, вы получите намного лучшую производительность от Flash по сравнению с использованием JavaScript (по крайней мере, на данный момент, хотя есть проекты, которые значительно ускоряют JS, но до этого еще немного).

Это не упрощает рисование на холсте. Что он делает, так это упрощает задачу анимации, если вы используете холст. Если вы делаете анимацию и не заботитесь о полной поддержке браузера, используйте Processing.js. Если вы не выполняете анимацию (например, при построении графиков или закругленных углов), не добавляйте накладные расходы на Processing.js.

В любом случае, я рекомендую вам узнать, как напрямую использовать Canvas API. Понимание api холста, особенно преобразований, очень поможет вам, даже если вы используете Processing.js.

Как уже упоминалось, IE не поддерживается Processing.js (включая бета-версию IE8). Я также обнаружил, что processing.js немного медленнее с точки зрения производительности по сравнению с простым использованием холста (особенно если вы анализируете строку с помощью языка обработки вместо использования javascript API).

Лично я предпочитаю Canvas API оболочке обработки, потому что это дает мне больше контроля. Например:

Функция обработки line () реализована примерно так:

function line (x1, y1, x2, y2) {
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.closePath();
  context.stroke();
};

И вы бы использовали это так (при условии, что вы используете API с поддержкой javascript):

var p = Processing("canvas")
p.stroke(255)

////Draw lines...///
p.line(0,0,10,10)
p.line(10,10,20,10)
//...and so on
p.line(100,100,200,200)
////End lines////

Обратите внимание, что каждый вызов line () должен открывать и закрывать новый путь, тогда как с помощью API Canvas вы можете рисовать все строки в одном блоке beginPath / endPath, значительно улучшая производительность:

context.strokeStyle = "#fff";
context.beginPath();

////Draw lines...///
context.moveTo(0, 0);
context.lineTo(10, 10);
context.lineTo(20, 10);
//...so on
context.lineTo(200, 200);
////End lines...///

context.closePath();
context.stroke();

Попробуйте новую реализацию javascript p5js p5js.org

О, и в ответ на ответ Лео вам на самом деле не нужно использовать функцию линия в обработке или p5js, есть отдельные функции beingShape и beingPath, похожие на api холста.