HTML-in-Canvas引爆前端量子位

word天，前端现在都高级成这样了吗？！

小手轻轻一指，被选中的区域就立马出现了碎片效果，炫酷感一整个扑面而来。

渲染真人还不算，设计游戏更是一把好手，同款射击破碎效果这就上桌。

还有高手，直接将网页设计成鱼眼效果，还是想怎么调就怎么调那种。

不止这些，𝕏（前推特）上此刻正有一大堆酷炫的前端作品刷屏，直让人眼花缭乱。

而它们，统统来自一种正悄然走红的实验性玩法——HTML-in-Canvas。

用最直白的话解释就是，这是一种把网页当成游戏画面来渲染的UI设计新尝试。

一众尝鲜的网友纷纷表示，HTML-in-Canvas很可能就是下一代网页交互的雏形。

我很少说某件事是“改变游戏规则的”，但HTML-in-Canvas可能就是。这是一个“让Flash回归”的时刻。

我一生都在等待这个Web API。

想象一下，将你能想到的任何视觉效果应用于任何HTML。

那么问题来了，HTML-in-Canvas到底是啥？

把HTML“塞进”Canvas里

HTML-in-Canvas，从名字上就能看出来了，这是一种把HTML“塞进”Canvas里进行渲染的方法。

之所以这样做，归根到底就俩字：方便。

传统网页开发近乎于“装配流水线”，HTML负责定结构、CSS负责定样式，最终交给浏览器来排版和渲染。

就是说，虽然“材料”是你给的，但网页最终长啥样，基本都是浏览器说了算。

而Canvas的逻辑完全不同——

没有DOM、没有布局系统、没有现成组件，开局只有一块空白画布，所以你可以随心所欲控制画面里的一切。

不过也正是因为过于随意，啥都要自己弄，所以Canvas一般被用来做游戏、数据可视化这类本来就需要自己从零开始的东西。

那么有没有一种东西，能结合HTML的“省心省力”和Canvas的“自由”呢？

HTML-in-Canvas，正是这样的东西。

它直接把HTML“拍成一张图”，再丢进Canvas里玩。

如此一来，也带来了三个最明显的变化：

一是过去很多难以实现的特效，现在都变得更加easy，因为你操作的已经不是DOM，而是像素了。

传统DOM有点像被整体打包好的东西（如一个按钮、一张图片、一段文字等），只能整体操作。

而像素就是组成这些东西的小碎粒，能单独控制每一个。

所以现在我们可以像开发游戏一样开发前端，比如网友们提到的：给UI加着色器、接入物理引擎，甚至逐帧去控制每一个像素该怎么动。

二是UI的布局更多元化了。

以前网页开发好像默认UI必须是矩形一样，所有东西都很方方正正。

但有了Canvas之后，前端开始出现鱼眼、透视滚动等非线性，甚至是奇奇怪怪的设计（doge）。

喏，有人就试了网页放大镜效果：

（实验性阶段，大家现在拼的都是创意hhh）

以及大家很容易忽视的一点，网页动画现在和游戏引擎用的是同一套逻辑了。

在传统前端开发里，动画的处境其实一直很尴尬：

你是在一套已经“定型”的静态结构上，硬让它动起来。

要么用CSS，给框架贴个“会动”的标签；要么用requestAnimationFrame，自己一帧一帧去改属性、做插值。

而HTML-in-Canvas，情况刚好反过来——整个渲染过程，本身就是一帧一帧计算出来的。

所以现在的网页，看上去就和游戏渲染画面差不多。

众所周知，正常HTML本身是没法运行《毁灭战士》（Doom）这款游戏的。

因为Doom是用C语言写的，需要直接操作图形、内存和输入设备，而HTML只是描述网页结构的语言，本身不具备游戏运行能力。

但现在，有人却把HTML“塞进了”Doom里。

这些网页元素被实时“拍”成图片，降成Doom能识别的256色，然后当作墙纸贴到Doom的墙面上。

所以现在你能看到Doom墙上有网页内容，而且还能跟着你的动作变化。

以及值得一提的是，虽然HTML-in-Canvas目前只是一项实验功能，但它已经以提案的形式进入W3C（万维网联盟）/WICG（Web平台孵化器社区组）体系——