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

Question

我正在考虑制作一个使用相当密集的 JavaScript/canvas 的网站，并且我一直在研究Processing.js，在我看来，它会使操作画布变得更加容易。有谁知道我不应该使用 Processing.js 的任何原因吗？我知道旧的浏览器将无法使用它，但现在没关系。

Answer 1

如果您对它在 IE7 中不起作用感到满意，那就去吧。我已经让它在 Firefox 3 中工作。这是一种将 Silverlight/Flash 效果带到您的页面的巧妙方法。

我的预感是，像 Processing.js 这样的库将在快速路径上进行更改或升级，因此请准备好在它们运行时运行并跟上新功能。

Answer 2

如前所述，Processing.js（包括 IE8 beta）不支持 IE。与仅使用画布相比，我还发现 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();
};

你会像这样使用它（假设你使用的是 javascript-exposed 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();

Answer 3

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

无论哪种方式，我都建议您学习如何直接使用画布 API。了解 canvas api，尤其是转换，即使您使用的是 Processing.js，也会对您有很大帮助。

Answer 4

我会说改用Flash。安装 Flash 的浏览器数量超过了使用 processing.js 的浏览器数量。此外，与使用 JavaScript 相比，您将从 Flash 中获得更好的性能（至少目前，虽然有一些项目正在加快 JS 的速度，但仍有一点距离）

Answer 5

尝试新的 javascript 实现 p5js p5js.org

哦，针对Leo的回答，你其实不用在处理或者p5js中使用line函数，有单独的beingShape和beingPath函数，类似于canvas api。