javascript - 使用javascript绘制面向对象的lineTo

Question

想知道如何使用 javascript 和 html5 使用 oop 使用 moveTo、lineTo 和 arc。看过很多绘制 fillrect 等的示例，但这似乎比使用 lineTo 等更简单。

我应该如何进行有很大的不同吗？

Answer 1

canvas-api 是相当低级的，它是一个所谓的立即模式 api，它确实更基于函数而不是面向对象。

“立即模式”意味着 api 不会跟踪 Canvas 上绘制的内容。 (参见https://en.wikipedia.org/wiki/Immediate_mode_%28computer_graphics%29)

一个经典的面向对象模式，可以设置在这样的 api 之上作为抽象层，就是 SceneGraph。实现这一点的基本 GoV 模式是复合模式。

• https://en.wikipedia.org/wiki/Scene_graph
• https://en.wikipedia.org/wiki/Composite_pattern

另一个选择是使用像fabricjs 这样的库，它会尝试跟踪绘制的对象。 Fabricjs 的主要用例是在浏览器中运行的矢量绘画应用程序，因此我不确定这是否满足您的需求。

在大多数情况下，我个人更喜欢 SceneGraph，但这取决于您的用例。