CSS魔术师Houdini，用浏览器引擎实现高级CSS效果

fbce5e79f3a74987b5dc1cd239a52e52.png

开门见山，直接上货

🔍 CSS Houdini是什么？

“Houdini”一词引用自“Harry Houdini”，他是一位20世纪的著名魔术师，亦被称为史上最伟大的魔术师、逃脱术师及特级表演者。

我们都知道，浏览器在渲染网页显示样式的时候，浏览器的渲染引擎会对 CSSOM 进行解析——包括布局、绘制和合成过程。而本文要讲的内容 Houdini 是 一组公开 CSS 引擎部分的底层API，它可以让开发者能够人工干预浏览器的渲染进程，Houdini的核心API Painting API就是将我们自定义的js代码插入到浏览器的绘制环节。

Houdini包括以下 API >>>

  • CSS Properties and Values API：顾名思义，就是与css属性相关的一系列 API，用于注册新的 CSS 属性，包括CSS.registerProperty API 和@property关键词（它们俩是等价的），例如我们常用 @property 常用于定义新的css属性，以实现一些css属性的动画过程，例如背景渐变色的变化过程。

  • CSS Typed OM：我们经常使用dom对象的style属性获取/设置它的一些 css 属性值，操作的值都是字符串。而 CSS Typed OM API为我们提供了一些列方法，可以获取/设置具体的css属性值、单位，（你可能觉得它很鸡肋，但是它也有它的优势，例如不用考虑属性的写法、强大的数学操作和单位转换、错误捕获处理、性能更好。

  • CSS Painting API：它可以说是CSS Houdini的核心 API之一，它其实就是css界的canvas，实现给元素设置复杂的自定义背景。使用时像 CSS.registerProperty 注册一个画像，然后就可以把这个画像应用于任何可以设置image的css属性上，例如background-image、border-image、list-style-image等。

  • Worklets：工作集也是CSS Houdini的核心 API之一。它用于在独立于主要 JavaScript 执行环境的渲染管道的各个阶段运行脚本的 API。它相当于 Web Workers 渲染管道的轻量级版本。它只有一个实例方法Worklet.addModule()，用于将给定 URL 处的脚本模块添加到当前工作集。注册工作集后，你可以像任何其他值一样在 CSS 中使用它。

  • CSS Layout API、CSS Parser API、Font Metrics API：最后这三个 API目前浏览器支持性都几乎为零，所以本文就不做介绍了。

☕ CSS Houdini怎么用？

CSS Houdini使用方法很简单，我总结为有以下几个步骤，我以实现一个波浪线来进行演示（最终效果如下图）：

image.png

1. 创建工作集文件

首先我们需要创建一个js文件，我这里取名为curved-line.js，我们要在里面实现自定义的背景效果。

2.使用registerPaint注册工作集

在我们创建的curved-line.js文件中添加以下代码注册工作集：
registerPaint有两个参数：registerPaint(name, classRef)，如下代码：

//实现工作集的类的引用。
class CurvedLine {//实现自定义css效果的代码
}//注册Worklets工作集  "curved-line": 要注册的工作集类的名称
registerPaint("curved-line", CurvedLine);

3.在工作集类中实现炫酷效果

绘图工作集类我们需要关注以下 4 个函数：

  • contextOptions：该函数定义了一个上下文选项contextOptions()，如下面的例子中返回一个简单的对象，声明允许 alpha 透明度；
  • inputProperties，要使用哪些CSS自定义属性（只能使用var变量，不可以使用css内置属性）；
  • inputArguments，CSS中使用paint函数除了模块名外的其他参数，指定其类型；
  • paint：最关键的方法，定义绘制行为。ctx的使用和canvas一致，size表示绘制的大小，包括width、height等信息，properties就是inputProperties静态方法里定义的属性，args就是paint的入参，跟inputArguments定义的对应。

下面是这 4 个方法的使用示例：

//file.js  工作集类方法示例
registerPaint('paint-color-example', class {  static get inputProperties() {   return ['--my-color'];  }  static get inputArguments() {   return [''];  }  static get contextOptions() {   return {alpha: true};  }  paint(ctx, size, properties, args) {  ctx.fillStyle = properties.get('--my-color');  ctx.beginPath();  ...  
});

以下是绘制曲线的代码（不多说了，就是用canvas绘制曲线）：

// curved-line.js
if (typeof registerPaint !== "undefined") {class CurvedLine {static get inputProperties() {return ["--curved-lineColor","--curved-lineSpread","--curved-lineWidth","--curved-lineHeight",];}paint(ctx, size, properties) {const lineWidth = parseInt(properties.get('--curved-lineWidth')) || 3;const lineHeight = parseInt(properties.get('--curved-lineHeight')) || size.height;const color = String(properties.get('--curved-lineColor')) || 'black';const spread = parseInt(properties.get('--curved-lineSpread')) || 50;const offset = (lineHeight < size.height) ? (size.height - lineHeight) / 2 : 0;const midPoint = lineHeight / 2;ctx.lineWidth = lineWidth;ctx.strokeStyle = color;ctx.beginPath();ctx.moveTo(0, midPoint + offset);let curStep = spread;while (curStep < size.width + spread) {const cp1x = curStep;const cp1y = (lineHeight * 1.5) + offset;const cp2x = curStep + spread;const cp2y = 0 - midPoint + offset;const x = curStep + spread * 2;const y = midPoint + offset;ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);curStep = curStep + (spread * 3);}ctx.stroke();}}registerPaint("curved-line", CurvedLine);
}

4. 将自定义的工作集添加到当前工作集

你要知道想要实现 CSS Houdini，即从原生层面扩展 CSS，就必须要以Worklets工作集的方式将自定义css的代码注册到渲染引擎的进程中。上面我们也提到了Worklets的使用方法：使用 Worklet.addModule() 实例方法将指定 URL 处的脚本模块添加到当前工作集，如下：

需要注意的是：

  • Worklets可以使用的类有很多种，例如网络音频工作集AudioWorklet，高性能程序动画工作集AnimationWorklet，绘图工作集PaintWorklet等，我们这里只使用了 PaintWorklet；
  • 工作集必须是个单独的js文件，并通过 Worklet.addModule() 引入；
  • Worklet 允许ESM静态导入，即使用import导入，但是不支持import()动态导入，会抛出异常！

在index.html或者main.js中添加我们的工作集：

<script>CSS.paintWorklet.addModule("curved-line.js");
</script>

5. 使用paint()函数设置炫酷背景

.line{width: 400px;height: 200px;--curved-lineHeight:20;--curved-lineWidth:4;--curved-lineColor: green;--curved-lineSpread:15;background: paint(curved-line);
}<div class="line"></div>

大功告成～～～🎉🎉🎉

🍭 CSS Houdini 的优点

以往我们实现复杂的效果往往都需要使用js和css进行配合，而使用 Houdini 后，相比 JavaScript ，它能够更快的解析。因为 Houdini 的代码不会像js一样等待 cssom 布局绘制完成后然后又可能造成回流重绘，它是被注入到浏览器渲染引擎的渲染进程中的。

在 JavaScript 中键入 CSS 值以及填充或发明新的 CSS 而不会影响性能终于成为可能。Houdini具有增强网络创造力的潜力。

🍭 CSS Houdini 的兼容性

目前 Houdini 的核心 API Painting API 兼容性还不是很好，使用时注意判断浏览器是否支持。

image.png

🎨 Houdini 案例

以下网站有一些很有意思的 Houdini Demo，感兴趣的可以看下：
https://houdini.how/

思考：因为利用 paint 绘制图案是静态单次绘制，没有办法只通过工作集来实现连续的动画过程，但是可以配合animation进行多次渲染，尤其是 steps 逐帧动画，配合 Houdini ，可以创造很多有意思的动画，例如steps配合 paint 绘制时钟（注意paint的ctx对象不支持绘制文本）。

最后

我是喜欢归纳总结前端相关知识的前端阿彬，尽力持续输出原创优质文章，欢迎点赞关注😘

表情包2.webp

往期文章：
# ☕ 通过和vue语法逐一比对，快速上手前端框架黑马svelte
# 🧙‍♀️css魔法：伪元素content ➕ css函数
# 玩转css逐帧动画，纯css让哥哥动起来💃
# 🕸2023 前端 SEO 无死角解读
# 我给自己搭建的前端导航网站，你们都别用🤪
# 2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！
# 浅谈 强制缓存/协商缓存 怎么用？
# 2023 前端性能优化清单

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/113690.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

luckfox pico 使用记录

luckfox pico 使用记录

连接 使用USB转TTL 连接 USB 也要一起插上 在显示控制台窗口上会显示板子的IP地址 USB接上后 会在网络和共享中心发现 以太网2&#xff08;通过RNDIS 通过USB 将板当网卡用,但使用网络共享&#xff0c;无法ping 通外部网&#xff09; 可以不关闭防火墙&#xff08;WIN10 6…
阅读更多...
对分库分表进行批量操作

对分库分表进行批量操作

对ShardingJDBC基础了解&#xff1a;https://blog.csdn.net/m0_63297646/article/details/131894472 对批量操作案例&#xff1a;https://blog.csdn.net/m0_63297646/article/details/131843517 分为db0和db1两个库&#xff0c;每个库都有三张订单表&#xff0c;分表键根据年份…
阅读更多...
unity 物体至视图中心以及新对象创建位置

unity 物体至视图中心以及新对象创建位置

如果游戏对象不在视野中心或在视野之外&#xff0c; 一种方法是双击Hierarchy中的对象名称 另一种是选中后按F 新建物体时对象的位置不是在坐标原点&#xff0c;而是在当前屏幕的中心
阅读更多...
信息技术02--初/高中--分类选择题(377道题与解析)

信息技术02--初/高中--分类选择题(377道题与解析)

文章目录 第一章 办公软件 1-96第二章 信息技术基础 1-41第三章 计算机系统基础 1-28第四章 多媒体技术 1-115第五章 计算机网络技术 1-50第六章 信息安全 1-3第七章 算法与程序简介 1-13第八章 数据结构 1-2第九章 数据库技术 1-20第十章 练习 1-9 第一章 办公软件 1-96 1、某…
阅读更多...
ABB PCD231B101励磁控制模块

ABB PCD231B101励磁控制模块

电磁励磁控制&#xff1a; PCD231B101 模块专门设计用于电磁励磁设备的控制&#xff0c;以确保发电机的励磁电流和电压维持在合适的水平。 多通道控制&#xff1a; 这种模块通常具有多个控制通道&#xff0c;可用于同时监测和控制多台电力发电机。 通讯接口&#xff1a; PCD2…
阅读更多...
0829【综述】面向时空数据的区块链研究综述

0829【综述】面向时空数据的区块链研究综述

摘要:时空数据包括时间和空间2个维度,常被应用于物流、供应链等领域。传统的集中式存储方式虽然具有一定的便捷性,但不能充分满足时空数据存储及查询等要求,而区块链技术采用去中心化的分布式存储机制,并通过共识协议来保证数据的安全性。研究现有区块链1.0、2.0和以Block-DAG为…
阅读更多...
taro 支付宝/微信小程序的chooseImage真机和开发工具上的区别

taro 支付宝/微信小程序的chooseImage真机和开发工具上的区别

支付宝小程序 微信小程序
阅读更多...
【CicadaPlayer】getPlayerBufferDuration分析

【CicadaPlayer】getPlayerBufferDuration分析

https://github.com/alibaba/CicadaPlayer/blob/release/0.4.4/mediaPlayer/SuperMediaPlayer.cpp核心关键函数int64_t SuperMediaPlayer::getPlayerBufferDuration(bool gotMax, bool internal)17个地方出现： getPlayerBufferDuration的durations 数组 分别 对音频、视频、字…
阅读更多...
阿里云配置MySQL-server 8.0远程登录

阿里云配置MySQL-server 8.0远程登录

Ubuntu 22.04 LTS 安装MySQL-Server 8.0 # apt search mysql-server # apt install mysql-server重建服务 # service mysql stop # vi /etc/mysql/mysql.conf.d/mysqld.cnf ... bind-address 0.0.0.0 ... # service mysql start # lsof -i:3306 COMMAND PID USER FD …
阅读更多...
JDK源码解析-ArrayList

JDK源码解析-ArrayList

1. ArrayList类 1.1 ArrayList类结构图 ArrayList 是一个用数组实现的集合&#xff0c;支持随机访问&#xff0c;元素有序且可以重复。 &#xff08;1&#xff09;ArrayList 是一种变长的集合类&#xff0c;基于定长数组实现。 &#xff08;2&#xff09;ArrayList 允许空值…
阅读更多...
蓝牙资讯|苹果AirPods耳机或可以支持隔空手势交互

蓝牙资讯|苹果AirPods耳机或可以支持隔空手势交互

根据美国商标和专利局&#xff08;USPTO&#xff09;公示的清单&#xff0c;苹果近期获得了一项关于 AirPods 耳机的最新专利&#xff0c;其亮点在于传统触控操作之外&#xff0c;还支持隔空手势操作。 其中图 4A 展示了一位佩戴 AirPods 耳机的用户&#xff1b;图 4B 展示了…
阅读更多...
十年网络安全工程师整理：渗透测试工具使用方法介绍

十年网络安全工程师整理：渗透测试工具使用方法介绍

渗透测试&#xff0c;是为了证明网络防御按照预期计划正常运行而提供的一种机制。 渗透人员在不同的位置&#xff08;比如从内网、从外网等位置&#xff09;利用各种手段对某个特定网络进行测试&#xff0c;以期发现和挖掘系统中存在的漏洞&#xff0c;然后输出渗透测试报告&a…
阅读更多...
说说我最近筛简历和面试的感受。。

说说我最近筛简历和面试的感受。。

大家好&#xff0c;我是鱼皮。 都说现在行情不好、找工作难&#xff0c;但招人又谈何容易&#xff1f;&#xff01; 最近我们公司在招开发&#xff0c;实习社招都有。我收到的简历很多&#xff0c;但认真投递的、符合要求的却寥寥无几&#xff0c;而且都是我自己看简历、选人…
阅读更多...
图像化数据库工具DBeaver远程连接云服务器的MySQL数据库

图像化数据库工具DBeaver远程连接云服务器的MySQL数据库

一、安装宝塔面板 使用xshell、electerm、SecureCRT等远程终端连接登陆上云服务器&#xff0c;在Linux宝塔面板使用脚本安装 安装后&#xff0c;如下图&#xff1a;按照提示&#xff0c;在云服务器防火墙/安全组放行Linux宝塔面板的端口 在浏览器打开上述网址&#xff0c;…
阅读更多...
Java“牵手”天猫整店商品API接口数据，通过店铺ID获取整店商品详情数据，天猫店铺所有商品API申请指南

Java“牵手”天猫整店商品API接口数据，通过店铺ID获取整店商品详情数据，天猫店铺所有商品API申请指南

天猫平台店铺所有商品数据接口是开放平台提供的一种API接口&#xff0c;通过调用API接口&#xff0c;开发者可以获取天猫整店的商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片、价格信息等详细信息 。 获取店铺所有商品接口API是一种用于获取电商平台上商品详…
阅读更多...
设计模式--装饰者模式（Decorator Pattern）

设计模式--装饰者模式（Decorator Pattern）

一、什么是装饰者模式&#xff08;Decorator Pattern&#xff09; 装饰者模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你在不修改现有对象的情况下&#xff0c;动态地将新功能附加到对象上。这种模式通过创建一个包装类&#xff0c;…
阅读更多...
西北大学计算机考研844高分经验分享

西北大学计算机考研844高分经验分享

西北大学计算机考研844经验分享 个人介绍 ​ 本人是西北大学22级软件工程研究生&#xff0c;考研专业课129分&#xff0c;过去一年里在各大辅导机构任职&#xff0c;辅导考研学生专业课844&#xff0c;辅导总时长达288小时&#xff0c;帮助多名学生专业课高分上岸。 前情回顾…
阅读更多...
ReactPy：使用 Python 构建动态前端应用程序

ReactPy：使用 Python 构建动态前端应用程序

在 Web 开发领域，ReactJS 已成为主导者，为开发人员提供了用于创建动态和交互式用户界面的强大工具集。但是，如果您更喜欢 Python 的多功能性和简单性作为后端，并且希望在前端也利用它的功能，该怎么办？ReactPy 是一个 Python 库，它将熟悉的 ReactJS 语法和灵活性带入了 P…
阅读更多...
【Spring+SpringMVC+Mybatis】SSM框架的整合、思想、工作原理和优缺点的略微讲解

【Spring+SpringMVC+Mybatis】SSM框架的整合、思想、工作原理和优缺点的略微讲解

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…
阅读更多...
OpenLayers7官方文档翻译，OpenLayers7中文文档，OpenLayers快速入门

OpenLayers7官方文档翻译，OpenLayers7中文文档，OpenLayers快速入门

快速入门 这个入门文档向您展示如何放一张地图在web网页上。 开发设置使用 NodeJS&#xff08;至少需要Nodejs 14 或更高版本&#xff09;&#xff0c;并要求安装 git。 设置新项目 开始使用OpenLayers构建项目的最简单方法是运行&#xff1a;npm create ol-app npm create…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023