by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12309
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、等不及了

Chrome 150+之后，可以通过开启#canvas-draw-element特性体验HTML-in-Canvas的神奇效果。

Chrome地址栏输入下面代码可开启：

chrome://flags/#canvas-draw-element

通常Web新特性都都要等浏览器正式支持才介绍。

但是这次的这个特性，实在是等不及了。

在过去，Canvas里面实现元素动效是麻烦的，啰嗦的，往往需要借助第三方的组件。

而CSS实现动画动效非常方便。

现在，有了HTML-in-Canvas，所有的Web动效，包括SVG动效，都可以无缝接入到Canvas中，Canvas的应用能力直接飙升。

比方说HTML原生的<dialog>弹框使用非常方便，于是，过去，WebGL/Canvas 游戏中的弹窗和提示面板就可以直接使用HTML <dialog>元素，而无需像以前一样重写一套游戏 UI 交互：

1. 游戏外悬浮 DOM：弹窗跟随游戏视口缩放很麻烦；游戏画布拖动缩放时 DOM 同步成本高。
2. 手写绘图 API 绘制 UI：成本极高，不能复用现有组件库。

又比如HTML转图片这个功能。

之前我们大多使用 html2canvas 这个项目，简单点的会借助SVG <forginObject>元素实现（详见“SVG foreignObject简介与截图等应用”此文）。

但是html2canvas还有不支持CSS锥形渐变，一些CSS混合模式效果不支持的问题。

现在又了HTML-in-Canvas，等于原生有了HTML转图片的能力，既全面，又高性能，html2canvas直接可以说拜拜了。

二、使用非常简单

将HTML绘制在Canvas上的代码非常简单，几行代码的事情。

最核心的一行代码就是：

canvas.getContext('2d').drawElementImage(htmlElement, 0, 0);

就可以了。

Chrome开发者社区提供了很多HTML-in-Canvas的案例：https://chrome.dev/html-in-canvas/

可以看到，无论是Video视频、Form表单还是iframe内嵌框架，都可以绘制在Canvas画布上。

而且目前主流的前端3D开发框架，如There.js、Pixi.js都已经加入了对HTML-in-Canvas的支持。

所谓实践出真知，看别人写的Demo，不如自己写个Demo。

脑筋一转，不妨试试看能不能把LuLu UI的表单验证直接搬到Canvas画布上。

案例

您可以狠狠地点击这里：HTML in Canvas 绘制LuLu UI表单组件演示页面

可以看到，表单不仅渲染了，特么的自定义的JS验证UI居然也一起带到Canvas里面去了。

真是牛了个大发了！

相关的代码如下所示：

<canvas id="canvas" style="width: 100%;" layoutsubtree>
<form id="validateForm" is-validate>
    ...略...
</form>
</canvas>
<script>
    const pixelRatio = window.devicePixelRatio || 1;
    const canvas = document.getElementById('canvas');
    const validateForm = document.getElementById('validateForm');
    canvas.style.width = validateForm.offsetWidth + 'px';
    canvas.style.height = validateForm.offsetHeight + 'px';
    canvas.width = canvas.clientWidth * pixelRatio;
    canvas.height = canvas.clientHeight * pixelRatio;

    const ctx = canvas.getContext('2d');

    canvas.onpaint = () => {
        ctx.reset();
        ctx.drawElementImage(validateForm, 0, 0);
    };
</script>

JS主要做两件事情，其一，设置合适的尺寸；其二，渲染。

然后就没有然后了，就这么Easy！

补充说明

– <canvas>元素上设置的layoutsubtree属性是必须的，这个千万不能删除，否则是没有实时渲染效果的。

– 我看到不少案例，包括官方案例，都在表单元素上设置了drawable属性，但是根据自己的实践，此属性不设置似乎不影响效果。但是暂时又没有改属性相关的资料，所以，其最终作用，暂时我也不清楚。

三、好了，暂时就先说这么多

AI编程时代，技术细节没必要深究，加上本身目前兼容性还不太好，我觉得了解这么多就好了。

静待浏览器大规模支持吧！

最后，想问下大家，目前还有哪些前端周刊还在更新的吗❓

发现AI编码来了之后，很多都停更了，难道前端这个行业这是自此不再上进了吗？ ​​​

🤔

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12309

（本篇完）