用js监控分辨率调整背景图片宽度_如何使用CSS Paint API动态创建与分辨率无关的可变背景
现代Web应用对图像的需求量很大,它们占据网络下载的大部分字节。通过优化它们,你可以更好地利用它们的性能。如果你碰巧使用几何图形作为背景图像,有一个替代方案:你可以使用CSS Paint API以编程方式生成背景。
在本教程中,我们将探讨其功能,并探讨如何使用它来动态创建与分辨率无关的动态背景。这将是本教程的输出:
设置项目
首先,创建一个新的 index.html
文件,并编写如下代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title> CSS Paint API</title><link rel="stylesheet" href="styles.css" /></head><body><textarea class="pattern"></textarea><script>if ('paintWorklet' in CSS) {CSS.paintWorklet.addModule('pattern.js');}</script></body>
</html>
有几件事要注意:
- 在第13行,我们加载了一个新的Paint worklet。目前,全球支持率约为63%。因此,我们必须首先检查是否支持
paintWorklet
。 - 我正在使用
textarea
进行演示,因此我们可以看到调整画布的大小将如何重绘图案。 - 最后,你需要创建一个
pattern.js
(用于注册绘画工作区)以及一个styles.css
,我们可以在其中定义几个样式。
什么是worklet?
Paint worklet是一个定义了应该画在画布上的内容的类。它们的工作原理与 canvas
元素类似。如果你以前有这方面的知识,代码会看起来很熟悉。然而,它们并不是100%相同的。例如,在worklet中还不支持文本渲染方法。
在这里,我们还要定义CSS样式。这是我们要使用worklet的地方:
.pattern {width: 250px;height: 250px;border: 1px solid #000;background-image: paint(pattern);
}
我添加了一个黑色的边框,这样我们可以更好地看到 textarea
。要引用一个paint worklet,你需要把 paint(worklet-name)
作为一个值传递给 background-image
属性。但是 pattern
是从哪里来的呢?我们还没有定义它,所以让我们把它作为我们的下一步。
定义Worklet
打开 pattern.js
并添加以下内容:
class Pattern {paint(context, canvas, properties) {}
}registerPaint('pattern', Pattern);
在这里可以使用 registerPaint
方法注册paintWorklet
。你可以在此处定义的CSS中引用第一个参数。第二个参数是定义应在canvas上绘画的类。它具有一个包含三个参数的 paint
方法:
context
:这将返回一个PaintRenderingContext2D
对象,该对象实现CanvasRenderingContext2D API
的子集。canvas
:这是我们的canvas,一个PaintSize
对象,只有两个属性:width和height。properties
:这将返回一个StylePropertyMapReadOnly
对象,我们可以使用该对象通过JavaScript读取CSS属性及其值。
绘制矩形
下一步是显示一些东西,所以让我们绘制矩形。将以下内容添加到 paint
方法中:
paint(context, canvas, properties) {for (let x = 0; x < canvas.height / 20; x++) {for (let y = 0; y < canvas.width / 20; y++) {const bgColor = (x + y) % 2 === 0 ? '#FFF' : '#FFCC00';context.shadowColor = '#212121';context.shadowBlur = 10;context.shadowOffsetX = 10;context.shadowOffsetY = 1;context.beginPath();context.fillStyle = bgColor;context.rect(x * 20, y * 20, 20, 20);context.fill();}}
}
我们在这里所做的就是创建一个嵌套循环,以循环遍历画布的宽度和高度。由于矩形的大小为20,因此我们要将矩形的高度和宽度除以20。
在第4行,我们可以使用模数运算符在两种颜色之间切换。我还为深度添加了一些阴影。最后,我们在画布上绘制矩形。如果在浏览器中打开它,则应具有以下内容:
使背景动态化
遗憾的是,除了调整 textarea
的大小和一窥Paint API是如何重绘一切的,这大部分还是静态的。所以,让我们通过添加我们可以改变的自定义CSS属性来让事情变得更加动态。
打开你的 styles.css
并在其中添加以下几行:
.pattern {width: 250px;height: 250px;border: 1px solid #000;background-image: paint(pattern);
+ --pattern-color: #FFCC00;
+ --pattern-size: 23;
+ --pattern-spacing: 0;
+ --pattern-shadow-blur: 10;
+ --pattern-shadow-x: 10;
+ --pattern-shadow-y: 1;}
你可以通过在CSS属性前加上 —
来定义自定义CSS属性。这些属性可以被 var()
函数使用。但在我们的案例中,我们将在我们的paint worklet中使用它。
在CSS中检查支持
为确保支持Paint API,我们还可以检查CSS中的支持。为此,我们有两个选择:
- 使用
@supports
规则守护规则。 - 使用后备背景图片。
/* 第一种选择 */
@supports (background: paint(pattern)) {/*** 如果该部分得到评估,则意味着Paint API 支持**/
}/*** 第二种选择* 如果支持Paint API,后一条规则将覆盖第一条规则。* 如果不支持,CSS将使其无效,并将应用url()的规则。**/
.pattern {background-image: url(pattern.png);background-image: paint(pattern);
}
访问绘画worklet中的参数
要读取 pattern.js
中的这些参数,您需要向定义paint worklet的类中添加一个新方法:
class Pattern {// `inputProperties`方法返回的任何东西,paint worklet都可以访问。static get inputProperties() { return ['--pattern-color','--pattern-size','--pattern-spacing','--pattern-shadow-blur','--pattern-shadow-x','--pattern-shadow-y']; }
}
要在 paint
方法内部访问这些属性,可以使用 properties.get
:
paint(context, canvas, properties) {const props = {color: properties.get('--pattern-color').toString().trim(),size: parseInt(properties.get('--pattern-size').toString()),spacing: parseInt(properties.get('--pattern-spacing').toString()),shadow: {blur: parseInt(properties.get('--pattern-shadow-blur').toString()),x: parseInt(properties.get('--pattern-shadow-x').toString()),y: parseInt(properties.get('--pattern-shadow-y').toString())}};
}
对于颜色,我们需要将其转换为字符串。其他所有内容都需要转换为数字。这是因为 properties.get
返回 CSSUnparsedValue
。
为了使内容更具可读性,我创建了两个新函数来为我们处理解析:
paint(context, canvas, properties) {const getPropertyAsString = property => properties.get(property).toString().trim();const getPropertyAsNumber = property => parseInt(properties.get(property).toString());const props = {color: getPropertyAsString('--pattern-color'),size: getPropertyAsNumber('--pattern-size'),spacing: getPropertyAsNumber('--pattern-spacing'),shadow: {blur: getPropertyAsNumber('--pattern-shadow-blur'),x: getPropertyAsNumber('--pattern-shadow-x'),y: getPropertyAsNumber('--pattern-shadow-y')}};
}
现在我们要做的就是用相应的 prop
值替换for循环中的所有内容:
for (let x = 0; x < canvas.height / props.size; x++) {for (let y = 0; y < canvas.width / props.size; y++) {const bgColor = (x + y) % 2 === 0 ? '#FFF' : props.color;context.shadowColor = '#212121';context.shadowBlur = props.shadow.blur;context.shadowOffsetX = props.shadow.x;context.shadowOffsetY = props.shadow.y;context.beginPath();context.fillStyle = bgColor;context.rect(x * (props.size + props.spacing),y * (props.size + props.spacing), props.size, props.size);context.fill();}
}
现在回到你的浏览器,试着改变一下。
总结
为什么CSS Paint API对我们有用?有哪些用例?
最明显的是,它减小了响应的大小。通过消除图像的使用,你可以节省一个网络请求和几千字节。这样可以提高性能。
对于使用DOM元素的复杂CSS效果,你还可以减少页面上的节点数量。因为你可以用Paint API创建复杂的动画,所以不需要额外的空节点。
在我看来,最大的好处是它的可定制性远高于静态背景图片。API还可以创建与分辨率无关的图像,所以你不用担心错过单一屏幕尺寸。
如果你今天选择使用CSS Paint API,请确保你提供polyfill,因为它仍然没有被广泛采用。如果你想调整完成的项目,你可以从这个GitHub仓库中克隆它。
来源:https://medium.com/better-programming,作者:Ferenc Almasi,翻译:公众号《前端全栈开发者》
用js监控分辨率调整背景图片宽度_如何使用CSS Paint API动态创建与分辨率无关的可变背景相关推荐
- bcb image 动态大小_实战|使用CSS Paint API动态创建与分辨率无关的可变背景
来源:https://medium.com/better-programming,作者:Ferenc Almasi 现代Web应用对图像的需求量很大,它们占据网络下载的大部分字节.通过优化它们,你可以 ...
- 用js监控分辨率调整背景图片宽度_【AIDA 64】用安卓手机监控电脑运行状态
偶然间在网上看到 AIDA 64 可以通过 LCD 将电脑监控状态信息投射到手机屏幕上,而且可以自己设置监控的内容,显示效果也可以自定义,前段时间闲着没事做了一个皮肤,这里分享一下.下面是显示效果: ...
- 怎么修改背景图片大小的HTML代码,css如何改变背景图片大小?
我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题.那么css如何改变背景图片大小?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,想要改变背景图片的大小,可 ...
- 摘自人民网体育频道的JS卷角翻转方块图片切换_网页代码站(www.webdm.cn)
1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- 前端背景图放置_如何在css中添加背景图?
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css background属性就是专门设 ...
- html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
标签可以使图片在保持宽高比不变的情况下自动调整.我们讨论的是div的背景图片实现固定宽高比自适应调整的方法.这里的图片不是< img>标签一样通过src引入,而是通过css的backgro ...
- html5中背景图片的大小怎么调,css中怎么改变背景图片大小?
在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法,希望对大家有所帮助 ...
- html背景图片不重叠铺满,css背景图片怎么铺满
该方法适用于所有品牌的电脑. CSS设置拉伸背景图片铺满屏幕 新建一个html文件,命名为test.html,用于讲解CSS中如何设置拉伸背景图片铺满屏幕. 在test.html文件内,使用div标签 ...
- vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: ...
最新文章
- C++中STL中的大、小、相等概念
- python list列表排序的两种方法及实例讲解
- 电气期刊论文实现:考虑爬坡约束和输电损耗的经济调度【有代码】
- Excel中这四个常出错的地方,你一定中过!
- 【AD】PCB设计知识整理(持续更新)
- 异常详细信息: System.UnauthorizedAccessException: 对路径的访问被拒绝。
- ubuntu设置成中文详细贴图教程
- js中math常用使用方法
- 2、java的应用领域
- 《一名网络工程师的自我修养》--子网划分
- OpenGL3.3透视矩阵原理计算
- 跑腿php源代码,跑腿php
- 微擎微信小程序 吃客部族微信小程序V2.3.1 前端开发+后端开发
- FPS游戏初开发--逻辑分析总结
- Whale帷幄 - 如何让企业自动化运营
- 秦朝是一个法治国家吗?
- windowsXP日常应用技巧及经验总结
- 骨传导耳机能不能保护听力?骨传导耳机原理科普及分析
- 计算机显示器上有条纹,电脑屏幕出现条纹有哪些原因
- wanlshop小程序商城配置UNIAPP商城 B2B2C多用户 多终端微信小程序开发者工具] - initialize
热门文章
- 利用Python对销售额进行预测
- 运行 ui5 serve 命令行报错的处理方法
- 如何在 SAP BTP 平台 ABAP 编程环境里消费基于 SOAP 的 Web Service
- 什么是 Immutable Web Apps
- SAP Cloud for Customer Cloud Application Studio的Trace功能
- SAP Spartacus B2B Unit page convertListItem方法的工作原理
- Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]
- SAP Spartacus自定义Component的Not found问题
- SAP Spartacus CmsComponentConnector
- SAP WebClient UI的会话重启原理