基本的HTML Canvas绘图/动画框架(或至少框架的大部分),例如processing.js仍然是必要的吗?

时间:2015-05-24 17:50:07

标签: html5-canvas processing.js

请允许我解释一下,这样就不会被标记为“基于意见”的问题。

我正在学习processing.js,我不禁注意到与Vanilla-JS的Canvas API中已有的功能有很多相似之处。 在普通的Canvas中编写一组大型动画可能比在处理时要复杂得多?

我问这个是因为,随着我继续了解有关vanilla API的更多信息,我看到JS多年来添加了许多新功能,这些功能开始(非常缓慢)使某些方面成为某些方面流行的框架,不再需要(jQuery是一个很好的例子)。我很好奇Canvas和processing.js是否属于这种情况。

就我个人而言,我正在努力确定我是否还应该花费大量时间处理.js(我不是要求你为我做出这个决定,但我只想要一些可以帮助我决定什么对我最好的信息。

1 个答案:

答案 0 :(得分:1)

Stackoverflow允许有关编程工具(如ProcessingJS)的特定非编码问题,但您的问题可能会因为过于宽泛而被关闭。

即便如此,这是我的想法......

原生画布与ProcessingJS

  • Html5画布诞生时拥有丰富的可与Photoshop本身相媲美的可能性。但是,原生画布是一个相对较低级别的工具,您必须使用自己的代码处理结构化,事件,序列化和动画。

  • ProcessingJS添加了结构,事件,序列化,动画和&很多(太棒了!)本机画布的数学函数。恕我直言,ProcessingJS是一个值得学习的高级工具。

将原生画布扩展为更高级别的工具而非低级工具

  • 使用大约500行javascript,您可以将可重用框架添加到本机画布,在更高级别的结构中添加这些功能:事件(包括拖放,缩放,旋转,命中测试等),序列化/反序列化。

  • 通过大约100多行,您可以将可重用框架添加到本机画布中,通过缓动执行动画。

  • 尽管原生画布具有提供甚至复杂内容所需的大部分功能,但在本机画布中非常需要PathObject。 PathObject将序列化路径以使其可重用。使用大约50行,您可以创建可重用的PathObject。

这是一个相当无用的建议:-p

尝试使用合适的工具(是的,没有特别的帮助)。

  • 单独学习原生画布可以让你做到,可能是70%的像素显示任务。

  • 对扩展程序进行编码(上面)将使您达到90%。

  • 使用像ProcessingJS这样的工具可以达到98%。

  • 是的,总有大约2%的边缘情况,您要么“无法到达那里”,要么必须降低您的设计要求以适应编码限制。

略微更具体的建议

由于ProcessingJS只是扩展了原生画布,恕我直言,花几天时间学习原生画布非常值得。这些知识将帮助您确定适合该工作的工具。