使用John Resig的Processing.js是否合理？

Question

我在考虑制作一个带有相当复杂的JavaScript / canvas使用的网站，我一直在研究Processing.js，它似乎可以使操纵canvas变得更加容易。有人知道为什么我不应该使用Processing.js吗？我知道旧版浏览器无法使用它，但目前这没问题。

- Frew

---

你有没有看过像Fabric.js这样的纯JavaScript画布库？ - kangax

Answer 1

如果您可以接受在IE7中无法使用，那就去试试吧。我已经在Firefox 3中测试过了。这是一种将Silverlight/Flash效果带到您的页面上的巧妙方法。

我的直觉是像Processing.js这样的库会发生变化或升级，所以当它们发生变化并且跟上新功能时，请准备好奔跑。

- AndrewDotHay

Answer 2

如上所述，Processing.js不支持IE（包括IE8 beta）。与仅使用canvas相比，我也发现processing.js在性能方面有点慢（特别是如果您正在解析带有Processing语言的字符串，而不是使用javascript API）。

个人而言，我更喜欢canvas API而不是processing包装器，因为它给了我更多的控制权。例如：

processing line()函数的实现大致如下：

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

假设您正在使用公开的JavaScript API，您可以像这样使用它：

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()函数都需要打开和关闭新的路径，而使用canvas API可以在单个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();

- Leo

---

当我尝试这个时，许多例子在Chrome和Safari中也无法工作。这应该被修复。 - Nils

那个例子有点牵强，不是吗？在Processing中，你可以使用beginShape()、vertex()和endShape()来完成同样的事情。 - endolith

Answer 3

它并不会简化在画布上绘图。它所做的是，如果您正在使用画布，则简化了动画任务。如果您正在进行动画且不关心完整的浏览器支持，则使用Processing.js。如果您不进行动画（例如制作图表或圆角），则不要添加Processing.js的开销。

无论哪种方式，我建议您学习如何直接使用画布API。理解画布API，尤其是转换，即使您使用Processing.js也会极大地帮助您。

- Prestaul

Answer 4

试用新的javascript实现p5js p5js.org

哦，关于Leo的回答，实际上你不必在processing或p5js中使用line函数，有单独的beingShape和beingPath函数类似于canvas api。

- Reed Jones

Answer 5

我建议使用Flash。安装Flash的浏览器比支持processing.js的浏览器更多。此外，与JavaScript相比，Flash的性能要好得多（至少目前是这样，虽然有一些项目正在加速JS，但还需要一段时间）。

- davr

---

理想情况下，Flash、Silverlight等技术都应该被淘汰，至少应该使用标准化的DOM内内容和功能。 - David-SkyMesh