我正在考虑制作一个使用相当密集的 JavaScript/canvas 的网站,并且我一直在研究Processing.js,在我看来,它会使操作画布变得更加容易。有谁知道我不应该使用 Processing.js 的任何原因吗?我知道旧的浏览器将无法使用它,但现在没关系。
5 回答
如果您对它在 IE7 中不起作用感到满意,那就去吧。我已经让它在 Firefox 3 中工作。这是一种将 Silverlight/Flash 效果带到您的页面的巧妙方法。
我的预感是,像 Processing.js 这样的库将在快速路径上进行更改或升级,因此请准备好在它们运行时运行并跟上新功能。
如前所述,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();
它不会简化画布上的绘图。如果您使用画布,它的作用是简化动画任务。如果您正在制作动画并且不关心完整的浏览器支持,请使用 Processing.js。如果您不制作动画(例如,如果您正在制作图表或圆角),则不要添加 Processing.js 的开销。
无论哪种方式,我都建议您学习如何直接使用画布 API。了解 canvas api,尤其是转换,即使您使用的是 Processing.js,也会对您有很大帮助。
我会说改用Flash。安装 Flash 的浏览器数量超过了使用 processing.js 的浏览器数量。此外,与使用 JavaScript 相比,您将从 Flash 中获得更好的性能(至少目前,虽然有一些项目正在加快 JS 的速度,但仍有一点距离)
尝试新的 javascript 实现 p5js p5js.org
哦,针对Leo的回答,你其实不用在处理或者p5js中使用line函数,有单独的beingShape和beingPath函数,类似于canvas api。