类似viso的在线制图工具processon怎么用

ProcessOn – 类 Visio 在线作图工具

ProcessOn 是一款 HTML5 的在线作图工具，可以作出各类工作流程图、结构图、思维导图等等，支持多人协作，以及一个分享绘图的社区。@Appinn

有人用 ProcessOn 画出了地铁路线图，看得出重点不在工具如何而是如何使用工具。

ProcessOn 将图分为 Flowchart 流程图、BPMN、EVC 企业价值链图等几大类，其实就是各种不同类型的图示，发挥想象力不要拘泥于分类。

ProcessOn 成品图最终可以导出 .png .pdf .pos 格式。国内团队作品， *** 作体验流畅，免费。

P.S. 在发布文件的部分出现了小 bug，将文件发布到其他网站会出现 http://localhost:8080 这样的错误…

工具/材料

Sublime Text

01

首先要准备一个画布，如下图所示，在HTML5中我们用canvas来表示画布

02

然后我们在script脚本中获取画布对象，如下图所示，运用JS的getElementById方法即可

03

接下来我们通过画布对象的getContext方法来获取上下文2d对象，如下图所示，我们要 *** 作的内容都在里面

04

然后我们给2d上下文填充背景色，如下图所示，运用上下文的fillStyle属性即可

05

接下来，运用上下文的fillRect方法来画一个矩形，注意里面的四个值就是四个坐标，如下图所示

06

最后我们运行界面程序，你会看到如下图所示的红色矩形样例，你可要和上面的坐标对应一下

07

当然2d上下文中还可以画其他的图形，如下图所示的圆形，大家根据自己的需要应用即可

---