👇 今日要闻
打破信息壁垒，走近全球前端。Hello World 大家好，我是林语冰。
Canvas 不是什么新型技术，而是"后 HTML5 时代"就存在的画布 API。但我一直在跟 DOM 主导的前端框架较劲，Canvas API 对我而言是知识盲区。
我使用最多的场景是 ECharts 等图表库，WebGL 高级 3D 特效，在线绘图工具和视频动画，但这些工具也不要求我掌握底层的 Canvas API，但最近 Canvas 掀起了一场"文艺复兴"。
就在上个月，两个 Canvas 技术完美摆拍，在 Web 圈引起了轩然大波，它们就是 HTML-in-Canvas 提案和 Pretext 库。
Pretext 库日后再说，本期我们先来聊聊 HTML-in-Canvas API。
🚦 HTML-in-Canvas 概述
WICG 全称 Web Incubator Community Group（Web 孵化社区工作组），是一个网络平台新功能的孵化基地或试验场。
WICG 在几年前就提出了 HTML-in-Canvas API，该提案最近因为炫酷特效完美摆拍而迅速走红。
HTML-in-Canvas 是一个关于使用 2D 和 3D <canvas> 来定制复杂 HTML 内容渲染的提案，主要为了实现将复杂文本和其他内容布局渲染到 <canvas> 上，探索更多高级布局内容在画布上渲染的可能性。
话不多说，我们先来瞄一眼 HTML-in-Canvas 提案的基本用法。
🚦 核心技术
HTML-in-Canvas 提案引入了三大原语：
layoutsubtree特性drawElementImage()方法paint事件
举个栗子，这是官方示例的部分代码：
上面三行高亮代码就是 HTML-in-Canvas 最核心的三大原语，我们快速了解一下它们的作用。
第一行高亮代码中，<canvas> 元素添加了 layoutsubtree（布局子树）属性，它允许画布中的直接子元素参与布局，使子元素拥有层叠上下文。
第二行高亮代码中，onpaint() 为 canvas 元素添加一个 paint 事件，它会在画布子元素的渲染变化时触发。
第三行高亮代码中，drawElementImage() 方法将画布的子元素绘制到画布上，并返回一个 transform（变换）对象。
有了这三板斧，就能在 <canvas> 实现中实现交互式的 HTML 和炫酷特效了。
🚦 适用场景
Canvas 目前迫切需要更复杂的文本样式支持，因为它的文本样式不像 CSS 那么丰富。
HTML-in-Canvas 解锁了花里胡哨文本的可能性，比如这是一个交互式的炫酷表单：
这是一个 shader（着色器）驱动的环状聚焦表单，当我们在字段之间切换时，橘色光环会在各个输入框之间高亮，聚焦字段附近的点阵背景也会被照亮。
此外，该提案在保留炫酷特效的同时，还能改良无障碍体验，比如这个标签栏的丝滑切换：
目前我们无法保证 <canvas> 无障碍的回退机制或备用功能始终能够始终匹配渲染内容，因为 Canvas 支持各种花里胡哨的 2D 甚至 3D 特效，生成这些无障碍备用内容难如脱单。
HTML-in-Canvas API 允许画布中的元素和对应的备用内容相匹配，降低了开发难度。
还有，HTML-in-Canvas 允许 HTML 元素和 WebGL 和 Shader（着色器）等高级特效梦幻联动。
目前我们使用 CSS 已经可以实现大量炫酷特效，比如滤镜、赛博边框等，但有一些 2D 和 3D 的高级特效需要结合 WebGL 和 Shader 来实现，该提案让 HTML 在 3D 环境中渲染成为可能。
比如这是一个人气爆棚的亮/暗模式切换示例：
HTML-in-Canvas 还支持媒体导出，我们可以将炫酷的 HTML 内容导出为图像或视频，而无需诉诸一些黑科技来"曲线救国"。
🚦 使用须知
虽然 WICG 在几年前就提出了 HTML---in-Canvas API，但该提案目前仍处于实验阶段，诚邀各位开发者测评。
要尝试使用 HTML-in-Canvas API，要求通过 chrome://flags/#canvas-draw-element 来启用，如果还是无法正常工作，就需要下载最新的 Chrome Canary（技术预览版）。
HTML-in-Canvas 提案目前正在征求反馈，包括哪些内容或模式更有效、如何改进无障碍支持等。
测评之前请参考一下 GitHub 上的官方文档，我了解到一些常见的坑包括 Canvas 的裁剪机制，画布尺寸和比例缩放问题等。
👇 重点总结
WICG 提出了 HTML-in-Canvas API，该提案尚处于实验阶段，但最近人气爆棚的 "Canvas 文艺复兴"现象，提前让我们遥视到了它的魅力和未来的潜力。
HTML-in-Canvas 的核心技术引入了 3 个原语：
layoutsubtree特性drawElementImage()方法paint事件
该提案可以在 <canvas> 中渲染交互式的 HTML 内容，支持丰富样式的文本和复杂布局内容，改善无障碍体验，简化开发体验，解锁更多高级 Canvas 应用的可能性。
以上就是今日《前端快讯》的全部内容了，希望对你有所帮助。
👍 感谢大家按赞跟转发分享本文，你的手动支持是我坚持创作的不竭动力喔。
🙏 已经关注我的粉丝们，我们下期再见啦，掰掰~~
👇 参考文献：
- 🔗 HTML-in-Canvas 仓库 ：github.com/WICG/html-i...
- 🔗 HTML-in-Canvas 教程 ：mattrothenberg.com/notes/html-...
- 🔗 Canvas 导出困境 ：meyerweb.com/eric/though...