by https://www.zhangxinxu.com/ from https://www.zhangxinxu.com/wordpress/?p=8204
一, 把 Canvas 图片作为 CSS 背景图片
CSS Paint API 可以简单理解为 (实际不能等同) 把 Canvas 画布作为普通元素的背景图片.
也就是 CSS 的 background-image 就是一个 Canvas, 我们可以利用 Canvas 绝大多数 API 绘制各种复杂有趣的图形效果, 以一种更高效的方式丰富 web 页面元素的视觉展现. 例如, 蓝色按钮不仅仅是个蓝色背景, 上面还有白云漂漂的效果, 想想就很棒!
二, 一个简单的案例了解 CSS Paint API
例如, 我们希望创建一个透明图片背景. 类似下面这样:
则完整的 CSS 代码和 JS 部分代码如下:
- .box {
- width: 180px; height: 180px;
- /* transparent-grid 自己命名 */
- background-image: paint(transparent-grid);
- }
然后绘制图形的 JS 务必作为模块引入, 例如, 建一个名为 paint-grid.JS 的文件, 在页面上引入:
- if (Windows.CSS) {
- CSS.paintWorklet.addModule('paint-grid.js');
- }
paint-grid.JS 文件代码如下:
- // transparent-grid 命名和 CSS 中的对应
- registerPaint('transparent-grid', class {
- paint(context, size) {
- // 这里就是绘制的代码了....
- }
- });
以上就是 CSS Paint API 使用的固定套路:
CSS 中 paint(abc);
JS 添加模块 CSS.paintWorklet.addModule('xxx.js');
xxx.JS 中代码套路固定, 在下面注释位置写绘制代码即可;
- registerPaint('abc', class {
- paint(context, size, properties) {
- // 绘制代码在这里....
- }
- });
其中 paint(context, size)中的两个参数可以稍微介绍下:
context
为绘制上下文, 全称是 PaintRenderingContext2D, 和 Canvas 的 https://www.canvasapi.cn/CanvasRenderingContext2D 是近亲, API 全部来自 Canvas, 一模一样, 不过由于安全限制, 有些 Canvas 中的有些 API 是不能使用的, 可用和不可用的 API 见下表:
Paint 可用 API | Paint 不可用 API |
---|---|
CanvasState | CanvasImageData https://www.canvasapi.cn/ImageData |
CanvasTransform | CanvasUserInterface |
CanvasCompositing | CanvasText |
CanvasImageSmoothing | CanvasTextDrawingStyles |
CanvasFillStrokeStyles | – |
CanvasShadowStyles | – |
CanvasRect | – |
CanvasDrawPath | – |
CanvasDrawImage | – |
CanvasPathDrawingStyles | – |
CanvasPath | – |
size
size 是一个包含了绘制尺寸的对象, 数据结构如下:
- {
- width: 180,
- height: 180
- }
size 的大小受到 background-size 属性大小的影响, 因此, 对于重复背景, 可以借助 background-repeat 进行平铺循环, 不用非得在绘制的 JS 代码中循环. 例如, 下面即将要展示的 demo 效果, 也可以这么实现, CSS 部分:
- .box {
- width: 180px; height: 180px;
- background-image: paint(transparent-grid);
- background-size: 16px 16px;
- }
然后, paint-grid.JS 中只需要填充白 - 灰 - 灰 - 白, 4 个格子就好了, 无需循环.
properties
可以用来获得 get 到的 CSS 属性和属性值, 包括 CSS 变量值; 以及其他一些参数.
眼见为实, 您可以狠狠地点击这里: CSS Paint API 绘制透明格子作为背景 demo(目前仅 Chrome 有效果)
效果如下截图:
paint-grid.JS 中的完整绘制代码如下:
- registerPaint('transparent-grid', class {
- paint(context, size) {
- // 两个格子颜色
- var color1 = '#fff', color2 = '#eee';
- // 格子尺寸
- var units = 8;
- // 横轴数轴循环遍历下
- for (var x = 0; x < size.width; x += units) {
- for (var y = 0; y < size.height; y += units) {
- context.fillStyle = (x + y) % (units * 2) === 0 ? color1 : color2;
- context.fillRect(x, y, units, units);
- }
- }
- }
- });
补充:
类似格子这类重复背景, 可以借助 background-repeat 进行平铺循环, 不用非得在绘制的 JS 代码中循环, 不过需要借助 background-size 属性帮助, 改变绘制的尺寸. 例如, 上面 demo 效果, 也可以这么实现, CSS 部分:
- .box {
- width: 180px; height: 180px;
- background-image: paint(transparent-grid);
- background-size: 16px 16px;
- }
然后, paint-grid.JS 中只需要填充白 - 灰 - 灰 - 白, 4 个格子就好了, 无需循环.
- registerPaint('transparent-grid', class {
- paint(context, size) {
- // 两个格子颜色
- var color1 = '#fff', color2 = '#eee';
- // 两个白色格子
- context.fillStyle = color1;
- context.fillRect(0, 0, 8, 8);
- context.fillRect(8, 8, 8, 8);
- // 两个灰色格子
- context.fillStyle = color1;
- context.fillRect(0, 4, 8, 8);
- context.fillRect(4, 0, 8, 8);
- }
- });
要更通俗易懂些.
三, CSS 变量让 Paint API 蓬荜生辉
上面的案例展示了 CSS Paint API 的基本使用, 但是, 虽然看上去新潮, 但并没有体现出 CSS Paint API 有什么过人之处.
你想啊, 我直接用 JS 加 Canvas API 绘制一个格子图案, 转换成 Base64, 直接作为元素的背景图片显示, 不也是一样的效果, 而且兼容性更好(IE9 + 逗支持), 所有 Canvas API 都能用, 没有限制. 对比一看, 完全没有使用 CSS Paint API 的理由嘛!
没错! 如果我们只是需要一个静态背景, 真不如直接 Canvas 绘制再转换成 Base64 图片(
toDataURL()方法)或者 Blob 图片 (toBlob() 方法 https://www.canvasapi.cn/htmlCanvasElement/toBlob ).
CSS Paint API 的优势在于: 其作为一个 CSS 属性值, 渲染是实时的, 自动跟着浏览器重绘的, 因此, 只要我们的绘制是和 CSS 变量相关联的, 所有的渲染效果都会实时刷新重绘, 这可就牛逼大了!
还是上面的透明格子例子, 格子的颜色以及格子的尺寸, 我们可以将其作为 CSS 变量提取出来, 如下:
- .box {
- width: 180px; height: 180px;
- --color1: #fff;
- --color2: #eee;
- --units: 8;
- background: paint(custom-grid);
- }
这些定义的变量我们可以在绘制的时候获取到, 示意如下:
- registerPaint('custom-grid', class {
- // 获取 3 个变量
- static get inputProperties() {
- return [
- '--color1',
- '--color2',
- '--units'
- ]
- }
- paint(context, size, properties) {
- // 两个格子颜色
- var color1 = properties.get('--color1').toString();
- var color2 = properties.get('--color2').toString();
- // 格子尺寸
- var units = Number(properties.get('--units'));
- // 绘制代码, 和之前一样...
- }
- });
静态效果是一样的:
但是, 如果我们修改了 CSS 代码中定义的变量值, 则, 我们可以看到 Paint 背景图实时变化效果(见下 GIF):
眼见为实, 您可以狠狠地点击这里: CSS 变量外加 Paint API 绘制透明格子 demo
无需额外的定时器, 真实时渲染, 控制非常方便.
配合 CSS Properties & Values API, 把 --units 等变量全部注册为合法的 CSS 属性, 则, 我们就能使用 transition 和 animation 属性纯 CSS 控制 Paint 背景图的运动和动画了, 按钮上云朵漂漂的效果完全不在话下.
这个案例以后再介绍.
四, Houdini, 兼容与其他
本文介绍的 CSS Paint API 是 CSS Houdini 的一部分, 最后提到的 CSS Properties & Values API 也是, 是目前 Chrome 已经支持的一部分 API.CSS houdini 可以自定义 CSS 属性, 布局等, 未来不可限量.
由于兼容性的问题, 如果想要在实际项目中使用 CSS Paint API, 还需要做兼容处理, 例如:
- .box {
- width: 180px; height: 180px;
- background: url(data:image/PNG;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2P8////fwY84P379/ikGRhHDRgWYfDu3Tu86UBQUBB/Ohg1gIFx6IcBABlfVjmYTYi7AAAAAElFTkSuQmCC);
- background: paint(transparent-grid, whatever);
- }
CSS Paint API 更适用于动态场景, 适合实现需要实时绘制渲染的需求; 如果是纯静态展示, 直接就用 JS 加 Canvas 实现得了, 没必要为了技术而技术.
CSS Houdini 及其相关的新技术可玩的东西很多, 以后有机会再多多介绍, 本文就到这里, 感谢您的阅读!
参考文档
- https://www.w3.org/TR/css-paint-api-1/
- https://css-houdini.rocks/
最后的最后
最后, 再说点其它你可能感兴趣的东西. 对于本文的透明格子效果, 其实最好的实现方法是直接 CSS background 绘制, 利用线性渐变和 CSS3 多背景.
代码如下:
- .box {
- width: 180px; height: 180px;
- background-color: #fff;
- background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
- background-size: 16px 16px;
- background-position: 0 0, 8px 8px;
- }
实时效果如下:
尺寸控制非常方便, 天然支持 animation 动画.
《CSS 世界》 https://weidian.com/item/?itemID=2225312451 签名版独家发售, 包邮, 可指定寄语, 点击显示购买码
来源: https://juejin.im/entry/5c03e13b51882531414342d7