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.mzph.cn/news/62430.shtml

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

相关文章

异或和大小比较类问题——抓住最高位：CF1863F

异或和大小比较类问题——抓住最高位：CF1863F

https://codeforces.com/contest/1863/problem/F 因为有等于&#xff0c;所以考虑异或和为0的合法区间&#xff0c;它可以随意切现在考虑切开后左边大于右边&#xff0c;可以发现左右边最高位可以互相抵消&#xff0c;似乎不太可做&#xff1f;此时可以换个考虑&#xff0c;考…
阅读更多...
抖音企业号无需API开发连接AI图像生成，打造AI智能绘图助手

抖音企业号无需API开发连接AI图像生成，打造AI智能绘图助手

1. 抖音用户使用场景&#xff1a; 作为抖音企业号的运营人员&#xff0c;我们一直在寻找新的方式来增强我们与用户之间的互动。最近&#xff0c;我们发现了AI绘图技术可以根据用户需求和指令自动创建图片&#xff0c;无需人为干预&#xff0c;这为我们节省了人力和时间。因此&a…
阅读更多...
node 如何下载任意版本

node 如何下载任意版本

开门见山啦 第一步&#xff1a;打开node官网 Node.js 第二步&#xff1a;点击下载 进入下面的页面&#xff0c;然后往下滑&#xff0c;点击 All download options 查看以往所有的版本号&#xff1a; 这样就可以按自己的需求下载对应的node版本啦 或者 &#xff1a; 最简单…
阅读更多...
Elasticsearch:为什么从 Elasticsearch 7.0.0 及更高版本中删除了映射类型 type？

Elasticsearch:为什么从 Elasticsearch 7.0.0 及更高版本中删除了映射类型 type？

在 Elasticsearch 7.0.0 或更高版本中创建的索引不再接受 _default_ 映射。 在 6.x 中创建的索引将继续在 Elasticsearch 6.x 中像以前一样运行。 7.0 中的 API 中已弃用类型 type&#xff0c;并对索引创建、放置映射、获取映射、放置模板、获取模板和获取字段映射 API 进行了重…
阅读更多...
c#事件（event）

c#事件（event）

概述&#xff1a; C#中的事件是一种特殊的委托&#xff0c;它用于实现观察者模式&#xff0c;允许对象在特定事件发生时通知其他对象。 以下是使用C#事件的示例&#xff1a; 首先&#xff0c;定义一个包含事件的类&#xff1a; public class EventPublisher {// 声明一个事…
阅读更多...
海格里斯HEGERLS高密度料箱式四向穿梭车存储系统有哪些显著优势？

海格里斯HEGERLS高密度料箱式四向穿梭车存储系统有哪些显著优势？

近些年仓储货架向着自动化、智能化发展&#xff0c;因此市面上出现很多不同类型的智能自动化仓储货架。其中&#xff0c;最受企业青睐的便是四向穿梭车货架。四向穿梭车货架根据其载重不同可分为托盘式和料箱式两大类。这两种不同类型的四向穿梭车货架在结构形式和控制方式上基…
阅读更多...
git 提交错误，回滚到某一个版本

git 提交错误，回滚到某一个版本

git log 查看版本号 commit 后面跟的就是版本号git reset --hard 版本号 &#xff08;就可以回滚到你要去的版本&#xff09;git push -f &#xff08;因为本地回滚了&#xff0c;所以和远程会差几个版本。所以这时候只有强制推送&#xff0c;覆盖远程才可以&#xff09;
阅读更多...
Tauri打包windows应用配置中文界面

Tauri打包windows应用配置中文界面

使用 Tauri Rust 开发桌面应用&#xff0c;在 windows 系统上&#xff0c;打包后安装包名称后缀、安装界面、相关说明默认都是英文的。如果要默认显示为中文&#xff0c;则需要在 tauri.conf.json 中配置相应参数。 前言 默认情况下&#xff0c;在 windows 系统打完的 mis 包…
阅读更多...
一图胜千言！数据可视化多维讲解（Python）

一图胜千言！数据可视化多维讲解（Python）

数据聚合、汇总和可视化是支撑数据分析领域的三大支柱。长久以来&#xff0c;数据可视化都是一个强有力的工具&#xff0c;被业界广泛使用&#xff0c;却受限于 2 维。在本文中&#xff0c;作者将探索一些有效的多维数据可视化策略&#xff08;范围从 1 维到 6 维&#xff09;。…
阅读更多...
手游排行前十名，手游排行榜2023前十名

手游排行前十名，手游排行榜2023前十名

今天为大家带来手游排行前十名&#xff0c;如今流行的手机游戏专注于在画面和游戏性方面为玩家提供更逼真、更流畅的游戏体验。在画面方面&#xff0c;手游开发商经常使用先进的游戏引擎和技术来提高游戏的图形质量和细节&#xff0c;以及增加游戏的动态照明和物理效果&#xf…
阅读更多...
【论文阅读】自动驾驶中车道检测系统的物理后门攻击

【论文阅读】自动驾驶中车道检测系统的物理后门攻击

文章目录 Abstract1.Introduction2.Background2.1.DNN-based Lane Detection2.2.Backdoor Attacks2.3.Threat Model2.4.Image Scaling 4.Evaluation4.1.Poison-Annotation Attack4.2.Clean-Annotation Attack4.3.Real-world Evaluation4.4.Bypassing Existing Defenses 论文题目…
阅读更多...
C语言每日一练----Day(12)

C语言每日一练----Day(12)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;最大连续1的个数 完全数计算 &#x1f493;博主csdn个人主页&#xff1…
阅读更多...
Dolphin for Mac(Wii游戏模拟器)配置指南

Dolphin for Mac(Wii游戏模拟器)配置指南

Wii模拟器Dolphin Mac是款适合Mac电脑中的游戏玩家们使用的模拟器工具。Wii模拟器Dolphin Mac官方版支持直接运行游戏镜像文件&#xff0c;玩家可以将游戏ISO拷贝到某一个文件夹中统一进行管理。Wii模拟器Dolphin Mac除了键盘和鼠标外&#xff0c;还支持配合原版的Wii遥控器操作…
阅读更多...
origin导出pdf曲线超出边框

origin导出pdf曲线超出边框

软件版本 软件版本Word2021Origin2021Adobe Acrobat Pro2023 问题描述 Origin导出的emf格式矢量图片&#xff0c;插入到Word中&#xff0c;显示正常&#xff0c;但是在使用Word导出→创建Adobe PDF→创建Adobe PDF导出PDF文件后&#xff0c;图片曲线就会超出边框&#xff0c…
阅读更多...
面试题——网络IO模型

面试题——网络IO模型

一、socket socket是在应用层和传输层中间的抽象层&#xff0c;它把传输层&#xff08;TCP/UDP&#xff09;的复杂操作抽象成一些简单的接口&#xff0c;供应用层调用实现进程在网络中的通信。Socket起源于UNIX&#xff0c;在Unix一切皆文件的思想下&#xff0c;进程间通信就被…
阅读更多...
[Mac软件]Adobe After Effects 2023 v23.5 中文苹果电脑版(支持M1)

[Mac软件]Adobe After Effects 2023 v23.5 中文苹果电脑版(支持M1)

After Effects是动画图形和视觉效果的行业标准。由运动设计师、平面设计师和视频编辑用于创建复杂的动画图形和视觉上吸引人的视频。 创建动画图形 使用预设样式为文本和图形添加动画效果&#xff0c;或逐帧调整它们。编辑、添加深度、制作动画或转换为可编辑的路径&#xff…
阅读更多...
HCIP---BGP协议

HCIP---BGP协议

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 根据AS自治系统可以将动态路由协议划分为IGP和EGP协议。IGP协议是应用在AS内部&#…
阅读更多...
四旋翼飞行器基本模型（MatlabSimulink）

四旋翼飞行器基本模型（MatlabSimulink）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
【Tkinter界面：练习-01】窗口-部件-布局

【Tkinter界面：练习-01】窗口-部件-布局

一、说明 python在用户界面开发中&#xff0c;其中有QT5&#xff0c;和Tkinter&#xff1b;对于实际项目&#xff0c;界面需要高大上&#xff0c;因此用QT5&#xff0c;对于开发人员的演示程序&#xff0c;或简单程序中&#xff0c;不建议QT5&#xff1b;用Tkinter已经足够。本…
阅读更多...
学习网络编程No.5【TCP套接字通信】

学习网络编程No.5【TCP套接字通信】

引言&#xff1a; 北京时间&#xff1a;2023/8/25/15:52&#xff0c;昨天刚把耗时3天左右的文章更新&#xff0c;充分说明我们这几天并不是在摆烂中度过&#xff0c;而是在为了更文不懈奋斗&#xff0c;历时这么多天主要是因为该部分知识比较陌生&#xff0c;所以需要我们花费…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023