话说江湖日新月异，AI横行天下，一招"一键成站"之术已令无数网页工匠黯然失色。然而，天下武功，不止于快，不止于强------偶有奇人，不求制敌，只求趣味。
此人姓名不详，人称"网页散人"。他端坐案前，鼠标轻移，忽见屏幕之上，一双双眼睛竟从角落里滚滚涌出，密密麻麻，煞是好玩。他微微一笑，向围观者言道："诸位莫急，我不过是在此网站上寻些乐趣，耽误不了各位片刻。"
这，便是HTML入Canvas之术的冰山一角。
第一章·奇技初现，江湖震动
此术之名，曰HTML in Canvas。
简而言之，它能将真实可交互的DOM元素，直接植入WebGL或2D画布之中。此乃一项提案，方才被添入Chrome Canary试验版，故近日江湖上才忽然冒出诸多惊艳演示，如雨后春笋，令人目不暇接。
散人得知此术，源于推特上一位名叫Matt Rothenberg的奇人。那帖子一出，江湖顿时沸腾------Wes Bos等高手纷纷下场把玩，另有一位名叫AA的侠客，演示了"手指枪"的奇妙效果，二者共同启发了散人那段令人捧腹的YouTube眼球演示。
第二章·两门绝学，各有短长
欲明此术之妙，须先知Canvas与HTML各自的短长。
Canvas一门，擅长定制奇诡的界面，像素级掌控，所向披靡，许多CSS望尘莫及之事，在Canvas面前皆不在话下。然Canvas有一大痼疾：文字排版、复杂HTML布局，力所不及，须得从头重造，费时费力。如此一来，可访问性、国际化、性能与渲染质量，皆成隐患。
HTML一门，恰恰将这些问题一一化解，然其灵活性与画面掌控力，远不及Canvas。
HTML in Canvas，正是将两门绝学合而为一，取长补短，相辅相成。
第三章·伦敦地铁，以身试法
散人为演示此术，祭出了一件旧作------一个伦敦地铁时刻表网站，乃其早年所造，彼时AI尚未能一键成站。
他素来想将这张时刻表嵌入一个Three.js的三维场景中，令其悬浮于虚空，动态更新。技术上而言，3JS支持文字渲染，本可手工实现，然工序繁琐，何必自讨苦吃？
于是散人祭出HTML in Canvas，三步了事：
第一步，将时刻表的HTML元素置为canvas的子元素。此时它充当canvas的降级备选，非所愿也。
第二步 ，在canvas元素上添加layoutsubtree属性，告知浏览器：此子元素乃真实布局参与者------可进入无障碍树，可接受焦点，然仍不显示于屏幕之上。此刻以审查工具察之，可见元素已然渲染，只是隐而不显，如高手藏锋，内力充盈，却不露山水。
第三步 ，以textelementimage2D函数，将该HTML元素转化为GPU纹理，贴于原本Thomas小火车图片之处。
施法既毕，时刻表赫然出现于三维场景之中，时钟跳动，班次更新，栩栩如生。
其原理，可喻为：浏览器在幕后对该元素持续截图，每逢子元素重新渲染，便触发paint事件，自动更新纹理。亦可手动调用重绘，一如requestAnimationFrame之道。
第四章·果冻滑块，化腐朽为神奇
散人又展示了另一演示，令围观者拍案叫绝。
只见一枚滑块，形如果冻，拖动之时，竟如活物般颤抖扭动，妙趣横生。此乃WebGPU与copyElementImage函数联手所为，将一个普通div绘于果冻滑块之下。然其骨子里，仍是一枚寻常的<input>元素，只是换了一身华丽的皮囊。
此等奇效，非HTML in Canvas不能为也。
第五章·暗礁潜伏，尚需打磨
然而，任何新生武功，皆有破绽。
此术目前尚在试验阶段，性能略显生涩，偶有不稳。已知缺陷中，有一条颇为棘手：drawElementImage的渲染时机，比DOM状态晚了整整一帧，视觉上略有错位。更有甚者------若在canvas子元素中放入滚动条，系统将直接崩溃。
除性能之外，隐私之忧亦不可忽视。此术既能渲染HTML，便可能将系统配色、用户主题、拼写标记、已访链接等敏感信息，悄然泄露给不法之人，成为指纹追踪的新利器。为此，提案设计了隐私保护渲染机制，将上述敏感信息一律遮蔽，不令其显现于画布之上。
大会散去，演示落幕。
散人望着屏幕上那个晃动的果冻滑块，若有所思。
江湖中人总说，最强的武功是能杀人的。然而真正令人心动的，往往是那些能让人发笑、令人惊叹、叫人忍不住多玩一会儿的东西。
HTML in Canvas，或许还稚嫩，或许还粗糙。
但它教会了这片沉闷的网络世界一件事：
网页，也可以是有趣的。