企业网站类型有哪些,wordpress页面自由布局,python 自动 wordpress,wordpress中文教程 下载开门见山#xff0c;直接上货 #x1f50d; CSS Houdini是什么#xff1f; “Houdini”一词引用自“Harry Houdini”#xff0c;他是一位20世纪的著名魔术师#xff0c;亦被称为史上最伟大的魔术师、逃脱术师及特级表演者。 我们都知道#xff0c;浏览器在渲染网页显示样… 开门见山直接上货 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使用方法很简单我总结为有以下几个步骤我以实现一个波浪线来进行演示最终效果如下图 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内置属性inputArgumentsCSS中使用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中添加我们的工作集
scriptCSS.paintWorklet.addModule(curved-line.js);
/script5. 使用paint()函数设置炫酷背景
.line{width: 400px;height: 200px;--curved-lineHeight:20;--curved-lineWidth:4;--curved-lineColor: green;--curved-lineSpread:15;background: paint(curved-line);
}div classline/div大功告成 CSS Houdini 的优点
以往我们实现复杂的效果往往都需要使用js和css进行配合而使用 Houdini 后相比 JavaScript 它能够更快的解析。因为 Houdini 的代码不会像js一样等待 cssom 布局绘制完成后然后又可能造成回流重绘它是被注入到浏览器渲染引擎的渲染进程中的。 在 JavaScript 中键入 CSS 值以及填充或发明新的 CSS 而不会影响性能终于成为可能。Houdini具有增强网络创造力的潜力。 CSS Houdini 的兼容性
目前 Houdini 的核心 API Painting API 兼容性还不是很好使用时注意判断浏览器是否支持。 Houdini 案例
以下网站有一些很有意思的 Houdini Demo感兴趣的可以看下 https://houdini.how/
思考因为利用 paint 绘制图案是静态单次绘制没有办法只通过工作集来实现连续的动画过程但是可以配合animation进行多次渲染尤其是 steps 逐帧动画配合 Houdini 可以创造很多有意思的动画例如steps配合 paint 绘制时钟注意paint的ctx对象不支持绘制文本。
最后 我是喜欢归纳总结前端相关知识的前端阿彬尽力持续输出原创优质文章欢迎点赞关注 往期文章 # ☕ 通过和vue语法逐一比对快速上手前端框架黑马svelte # ♀️css魔法伪元素content ➕ css函数 # 玩转css逐帧动画纯css让哥哥动起来 # 2023 前端 SEO 无死角解读 # 我给自己搭建的前端导航网站你们都别用 # 2023 最新最细 vitevue3ts 多页面项目架构建议收藏备用 # 浅谈 强制缓存/协商缓存 怎么用 # 2023 前端性能优化清单
