WebGL
入门教程
WebGL技术,将用于开发桌面3D应用程序的OpenGL技术移植至网页上,从而使得在普通网页中开发3D应用程序成为可能。
WebGL有非常成熟稳定的API,并且数量较少,因此WebGL编程不难。但自从OpenGL升级后,要求编程人员从一开始须清楚地了解着色器的相关知识,在一定程度上抬高了门槛。
本站尝试通过 Step by step 的方式,辅之于丰富的图例,从无到有建立起一个较为完善的应用框架(application framework),不断地隐藏已学习知识点的细节,随时转移关注点,从而达到降低WebGL编程的学习难度。
下图是在第7章应用框架
中所实现的应用框架时序图:

(注:上图使用本站自行研发的Mermaid Editor在线制作,该图表的源代码及实时效果详见时序图。)
及其运行的效果图:

2月2日,使用MacOS X的SF符号应用程序,添加在桌面计算机上阅读教程时可随意隐藏、显示左右边栏功能。28日,左右边栏升格为session状态,并优化改善了用户体验。
2月15日,修正了WebGL Editor的一些问题,现在,可以在线编辑并运行WebGL应用了。此功能作为Playground已放在复合VBO一节中。
【 2024年2月9日,更新至通用glTF树形控件 】
SVG 2.0
参考
2024年7月5日,加入SVG参考。
7月19日,将相关部分整合为坐标系一章。
2025年4月20日,添加SVG Paths,在SVG中通过拖动节点来便捷地生成贝塞尔曲线。25日更新。
4月24日,创建SVG Path Editor。30日更新。
工具类
测试
1月30日,实现BinUtils.js。2月6日修订。
2月11日,实现DOMUtils.js。4月5日修订。
4月2日,实现ArrayUtils.js。
4月26日,实现SVGPathUtils.js。
Web组件功能更新
- 2024年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组件添加背景网格功能。
- 5月9日,LiveEditor增加了JavaScript定制功能。
- 7月4日,添加SVGEditor组件。
- 2025年3月20日,LiveEditor增加自动设置输出面板高度的功能。
- 3月27日,LiveEditor支持将调用者的相对路径自动转换为其绝对路径。
- 3月30日,LiveEditor支持内置的PageConsole。
- 4月10日,LiveEditor默认支持本站丰富的CSS样式。支持颜色主题切换,目前绑定为暗黑主题样式。
- 4月11日,PageConsole修正内置的Treeview控件在显示时有瑕疵的问题,并加入导入第三方代码的功能。
- 4月21日,LiveEditor添加新的钩子方法doAfterApplyHTMLFromTab,以供子类SVGEditor使用。
CSS
参考
2024年2月26日,散落的CSS文档有了归宿,开始集成为系列文章CSS参考。
3月18日,加入工具色轮。
2025年1月3日,添加Webkit CSS Demos。
2月10日,添加CSS Table。3月10日修订。
【重磅】2月25日,W3C发布CSS Snapshot 2024。本站随之更新CSS概述。
3月3日,开始整理添加CSS Grid2 Examples。
3月3日,添加CSS亮黑主题切换。
3月6日,修订CSS Colors。4月10日修订。
3月7日,在CSS Animations添加实现图像轮播。
3月8日,添加垂直水平居中标签。3月26日更新。
3月9日,添加CSS Backgrounds。3月11日修订。
3月12日,添加按比率最大化缩放子容器。4月8日修订。
3月13日,添加CSS Transforms。
3月14日,添加CSS 新特性。
3月15日,添加CSS 通用技巧。
3月19日,添加 Tutorials 系列之Mac风格暗黑菜单。
3月27日,添加亮色主题设计演示。
3月27日,重新全面设计Unicode 查询表的版面,自动响应操作系统颜色主题变化,添加放大显示鼠标悬停所在字符的功能,同时纳入BMP平面外的麻将拼图及扑克牌的字符集。
4月7日,添加设置列表样式。4月10日修订。
4月14日,添加CSS Writing Modes。对于中华古代诗词及古籍的展现,效果无可伦比。15日修订。
4月18日,修订CSS Animations。
4月19日,添加CSS Masking Module,轻松实现各种图形的布尔运算。
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日,更新绘制文本。
4月30日,更新渐变色。
5月30日,更新颜色混合模式。
6月29日,更新动画基本原理。
8月4日,加入Fill Rule。
8月10日,更新使用Scale变换,以及Color Wheel(修正了鼠标在高分辨率设备下不能精准定位的问题)。
2025年3月29日,添加将Unicode字符转换为PNG图像。
3月29日,在Canvas 2D 概述中添加两套尺寸大小的最终解决方案的内容。
4月3日,添加getImageData。
4月4日,添加Canvas 临摹,并生成可下载SVG的链接。4月8日添加HTML转换为SVG一节。
4月11日,以PageConsole为载体,改写geoGrp,完善内部应用devicePixelRatio细节以应对复杂环境,以及集成操作像素数据的功能。
4月14日,添加geoGrp 像素操作。4月17日更新。
JavaScript
参考
2023年10月15日,开始将散落的JavaScript文档集成为JavaScript参考。
2024年2月25日,更新WebAssembly 快速入门。
3月6日,修订正则表达式多个章节,由此本部分的主要内容已均有涵盖。
3月6日,在线正则表达式上线。每次输入均能立即动态依序加亮显示所有的匹配结果。使用Web Worker技术,主线程无阻滞。支持HTML转义。
3月17日,添加数组方法分类索引。
4月9日,更新Web Workers。
11月5日,添加Proxy。
11月9日,更新WebAssembly 快速入门,以及键盘事件。
11月13日,修订WebAssembly 快速入门,WebAssembly成为独立的专题,且NetBeans一键运行实现更便捷的方式。
11月15日,添加Wasm Text。2025年1月12日修订。
11月19日,添加xterm.js。24日修订。
11月26日,初步实现一个PageConsole,将终端请至Web页面。
11月30日,修订Object
一章中的遍历对象属性。
12月8日,更新处理二进制数据。
12月12日,更新Promise。
12月21日,将MDN Streams Examples转制为在本站可运行及查看源代码的demos。
12月25日,更新Stream。
2025年1月2日,更新Service Workers。
1月4日,PageConsole开始按Web标准Console Standard予以实现。4日实现格式化字符串;6日实现分组;8日实现表格及断言;9日实现error, info, 及warn。
1月8日,添加HTML Table DOM。
1月12日,添加Wat to Wasm,简单、直白地在线编译并运行Wasm Text。23日修订。
1月13日,更新JavaScript快速导览。
1月17日,更新Wasm Functions。
1月24日,更新Floating Numeric Instructions。
1月28日,更新程序流程控制指令。
1月30日,添加各种进制工具类。2月6日,经综合比较二进制的原码、反码及补码的特点及优劣后,舍弃了JavaScript的默认算法,改用二进制原码来表现负数的二进制。
2月8日,更新Wasm Memories。
2月9日,修订Numeric Instructions,加入值域一节。
2月16日,更新Vector Instructions。
2月16日,添加数值的表示与转化。
2月18日,应用编译原理相关理论,开始尝试实现一个通过JavaScript来编译的在线编译器。24日,通过流的方式,实现了词条扫描。
2月25日,添加Bas64编码机制。3月1日更新。
2月26日,更新生成斐波那契数列。
3月14日,更新Clipboard一节。
3月15日,初步实现Web Clipboard,一个超级方便的剪贴板书写工具。27日更新。
Mermaid
入门教程
2023年9月4日,添加Mermaid入门教程。
Mermaid借鉴了Markdown的语法,通过声明的方式来制作图表。其在制作UML各类图表时非常方便。同时,Mermaid支持制作暗黑模式的图表。
2024年2月19日,Mermaid CDN 所提供的 ESM 恢复正常,本站的Mermaid入门教程得以恢复正常使用。
2025年2月20日,换用一个新CDN,消除浏览器终端中出现的警示信息;通过自定义CSS全面解决了因整合原因而导致节点排版不居中的问题。
人工智能 AI
专题
2月4日,添加国内 AI 2024年成就与突破。
2月5日,添加国内 AI 模型索引。
2月15日,添加DeepSeek使用技巧。
Python语言
参考
11月3日,加入Python语言参考。初步介绍了Brython及PyScript这两个在Web上可直接使用Python的JavaScript库。
11月5日,修订PyScript。
C语言
参考
8月23日,加入C语言参考。
8月24日,添加指针。8月27日更新。
9月6日,添加结构、链表,及其string.h标准库中的部分内容。9月12日更新。
9月8日,添加C字符串。并以字符串为例,实现内存自动清理的功能。
Online Vector Editor
8月3日,加入Online Vector Editor。
现在不乏各类的矢量编辑软件。但使用起来总体感觉功能虽然强大,但软件易用性不强。故此产生了创建此类应用的想法。目的是让矢量图形的创建与编辑成为简单而有趣的工作。
当前版本号为0.1 beta
,实现了以下基本功能:
- 可创建的图形包括:矩形、圆、椭圆、直线、正多边形
- 图形创建时支持Spacebar移动、Shift键约束的操作
- 每个图形可独立更改其填充颜色、描边颜色,及其相应的核心属性
- 图形可自由拖动
- 可通过对象列表面板统一管理所有的图形
- Delete键可删除图形
网站架构改版
2月17日,对系列文章的网站架构进行重大改版,因改动之处较多,工作量巨大,特做系列文档重构备注。
目前已完成:
- JavaScript编程语言参考
- Graphviz入门教程
- NetBeans专题 (table中的pre的排版问题涉及不少细节,值得列个专题)
- WebGL入门教程
- Mermaid入门教程
- Web Components参考
- CSS参考
11月21日,支持多级嵌套的对象属性。
交互式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改用新算法自动生成相应的图像。目前已按层级自动生成所需的表格。
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等技术,在桌面客户端或移动客户端均适合访问。
推荐使用本站精心维护的暗黑模式访问本站,可获得最佳用户体验。