WebGL
入门教程
WebGL技术,将用于开发桌面3D应用程序的OpenGL技术移植至网页上,从而使得在普通网页中开发3D应用程序成为可能。
WebGL有非常成熟稳定的API,并且数量较少,因此WebGL编程不难。但自从OpenGL升级后,要求编程人员从一开始须清楚地了解着色器的相关知识,在一定程度上抬高了门槛。
本站尝试通过 Step by step 的方式,辅之于丰富的图例,从无到有建立起一个较为完善的应用框架(application framework),不断地隐藏已学习知识点的细节,随时转移关注点,从而达到降低WebGL编程的学习难度。
下图是在第7章应用框架
中所实现的应用框架时序图:
及其运行的效果图:
2月2日,使用MacOS X的SF符号应用程序,添加在桌面计算机上阅读教程时可随意隐藏、显示左右边栏功能。28日,左右边栏升格为session状态,并优化改善了用户体验。
2月15日,修正了WebGL Editor的一些问题,现在,可以在线编辑并运行WebGL应用了。此功能作为Playground已放在复合VBO一节中。
【 2024年2月9日,更新至通用glTF树形控件 】
Canvas 2D
参考
3月22日,添加潜心研发的JavaScript库geoGrp。色轮工具即利用此库来实现。目前,正对geoGrp已经实现的APIs逐一测试、完善、优化,已完成部分则及时记入文档。
3月30日,加入Canvas参考。
4月10日,实现CanvasGrids, 查看演示。在绘制较复杂的图形时使用价值较高。
4月10日,加入Mouse Events。
4月12日,更新统一应对标准设备与高清设备,加入使用prototype来重定义方法,以及使用Scale变换。并使用后者改写了CanvasEditor。
4月13日,更新CSS Color Names in Black,通过计算自动设定canvas的最佳高度,并在不同设备下取得最佳视觉效果。
4月14日,添加可拖曳的图形。查看演示。在前面基础上实现了可拖曳的bezier曲线。
4月15日,添加Quadrtic Bezier曲线的内容,添加可拖曳的quadratic曲线工具。
4月17日,更新绘制文本。
Web组件功能更新
- 2月18日,trim-pre组件添加对white-space属性的监听功能,以允许在按默认配置创建实例后再根据当前页面的需求,对其中一部分组件进行更精细的调节。
- 2月19日,graphviz-editor组件添加default-settings属性,以提供暗黑模式的默认值。
- grv-fig组件
- 3月30日,添加CanvasEditor组件。
- 4月1日,对live-editor组件作了大幅修改,增加多个多个钩子方法。canvas-editor组件得以率先使用这些特性。参见CanvasEditor Test。
- 4月2日,添加CopyEditor Utils组件,用于将特定内容快速地复制到剪贴板中。适合于桌面编写代码时使用。
- 4月5日,LiveEditor完善了Console输出,并添加切换显示、隐藏Console区域功能。
- 4月6日,CanvasEditor组件添加自动应对高分辨率设备功能。
- 4月16日,CanvasEditor组件添加背景网格功能。
JavaScript
参考
2023年10月15日,开始将散落的JavaScript文档集成为JavaScript参考。
2024年2月25日,更新WebAssembly 快速入门。
3月6日,修订正则表达式多个章节,由此本部分的主要内容已均有涵盖。
3月6日,在线正则表达式上线。每次输入均能立即动态依序加亮显示所有的匹配结果。使用Web Worker技术,主线程无阻滞。支持HTML转义。
3月17日,添加数组方法分类索引。
4月7日,更新JavaScript概述一节。
4月9日,更新Web Workers一节。
CSS
参考
2月26日,散落的CSS文档有了归宿,开始集成为系列文章CSS参考。
3月9日,加入CSS前沿阵地,作为CSS最前沿技术的试练场,以决定是否投入使用。
3月18日,加入工具色轮。
范例演示
4月2日,加入MDN在线游戏演示:2D breakout。
HTML
3月3日,加入工具HTML Unicode。
网站架构改版
2月17日,对系列文章的网站架构进行重大改版,因改动之处较多,工作量巨大,特做系列文档重构备注。
目前已完成:
- JavaScript编程语言参考
- Graphviz入门教程
- NetBeans专题 (table中的pre的排版问题涉及不少细节,值得列个专题)
- WebGL入门教程
- Mermaid入门教程
- Web Components参考
- CSS参考
交互式Treeview
2月3日,利用HTML 5的details标签实现了一个交互式的 Treeview 控件。基本特征使用纯CSS 3实现,节点的动态选择使用JavaScript实现。并自动适配了 Safari 及 Chrome 浏览器的不同特性。
代码极其简单,但结果非常实用。查看演示效果。
2月6日,在上面的基础上实现了glTF文件查看器。有此支持,在全面解析.glTF文件时特别方便。
2月8日,开始与Graphviz相结合而制作的glTFObj Graphviz。目前仅能支持Box.glb的硬编码绘图。确定好版面及格式后,即可进一步实现根据所选自动绘图。
2月12日,glTFObj Auto Graphviz改用新算法自动生成相应的图像。目前已按层级自动生成所需的表格。
Mermaid
入门教程
2023年9月4日,添加Mermaid入门教程。
Mermaid借鉴了Markdown的语法,通过声明的方式来制作图表。其在制作UML各类图表时非常方便。同时,Mermaid支持制作暗黑模式的图表。
2024年2月19日,Mermaid CDN 所提供的 ESM 恢复正常,本站的Mermaid入门教程得以恢复正常使用。
【 最后更新:2023年9月07日 】
GraphViz
入门教程
2023年7月10日开始编写GraphViz入门教程
。这种方式是程序员作图的至爱,因为它允许我们通过编写代码的方式,而不是使用PhotoShop等制图软件来作图。
GraphViz是通过声明式的语法来生成图表(diagram)的一种技术,简单、灵活且强大。掌握这门技术后,在需要图表时可唾手可得,非常方便。
有多种类似于GraphViz的声明式作图技术,如Mermaid, PlantUML等。后者非常适合于绘制诸如时序图、用例图、类图等专门的图表。其中PlantUML的部分功能实现需要GraphViz的支撑。而GraphViz则是一个通用的图表绘制工具,原则上您可以使用它来绘制任何类型的图表。
【 最后更新:2023年7月28日 】
CSS Grid
入门教程
CSS Grid是极富创造性的一种页面布局编排机制,是CSS不断进化过程中的集大成者。它丢弃了HTML中table标签的呆板机制,却紧密地结合CSS各种最新技术,从CSS的角度,重新实现了table的功能,并有过之而无不及。它已经成为Web前端开发人员必须掌握的技术之一。
CSS Grid的内容较多,学习起来有一定的难度,本教程通过丰富的实例,并借助于本站自行开发的强大的LiveEditor的实时运行功能,清晰地演示了CSS Grid的各项关键技术,能较为有力地帮助我们系统学习与掌握CSS Grid技术。
梅花易数App投入使用
2023年6月3日,梅花易数 App的按公历时间起卦功能基本完成。支持动态点击查看八卦、六十四卦的内容,并附上占卦总诀、体用总诀、卦气衰旺等在解卦过程中非常实用的内容。
6月19日,起卦方式可支持按公历时间、按农历时间、按单数、按双数、按八卦、按万物方位,共计6种起卦方式。
6月25日,按按农历时间起卦
版面中加入观梅占
及牡丹占
两个经典案例。点击这两个链接,可自动将相应的农历时间填写至表单中,再点击提交
按钮,即可起卦。结合本站自动生成的卦象,可十分直观地领悟邵康节先生在应用梅花易数时的高深技巧。更多经典案例正在添加中。
7月4日,增加用户登录功能,登录后可保存自己的梅花易数卦例,非常适合及时起卦、事后验证,及编写感悟。
2024年2月13日,修正梅花易数入门教程中不能正常绘制八卦图像的错误。
关于本站
本站是一个研究、演示并最终融汇使用各种Web开发技术的技术网站。
使用CSS Flex, CSS Grid等技术,在桌面客户端或移动客户端均适合访问。
推荐使用暗黑模式访问本站。