Chrome v65 将支持 CSS Paint API

Chrome v65 中将会支持 CSS Paint API。

什么是 CSS Paint?在说清这个概念之前先看下我们平时是如何设置一个元素背景的:background-image: url('...');或者linear-gradient(),分别是用引入图片或者 CSS 编程的方式,而 CSS Paint 则是用 JS 编程的方式,让你在 CSS 中能够引入用 JS 编写的图形。

啥也不说了,先看个例子,这个例子是给 元素加个背景,选 的原因是它可以缩放。

在上面的例子中,先定义一个叫 CheckboardPainter 的画板(Paint Worklet),并且将之注册为 "checkerboard",然后通过 CSS.paintWorklet.addModule 的方法加载这个画板,这样就可以在 CSS 中用 paint(checkboard) 来给指定元素添加背景图了。效果图如下:

有人会问,这个效果背景图也能实现啊。CSS Paint 与背景图的差别就是背景是根据代码计算出来的,不会随着元素的大小变化而伸缩,并且对图像的修改仅仅通过修改代码就能实现,而不再需要跟设计同学要设计稿啦!

下面我们仔细讲解下这个 CSS Paint。

在画板类(Paint Worklet Class)中,有一个叫 paint 的回调函数,有三个参数:

ctx:熟悉 canvas 的对 context 一定不陌生,在这里你可以使用在 canvas 上一样的方式绘制图形;

geometry:包含画板的宽高信息;

properties:可以获取自定义元素属性,这么讲很抽象,拓展下刚刚的例子。

在 CheckerboardPainter 类中,给静态属性 inputProperties 定义了两个属性:--checkerboard-spacing 和 --checkerboard-size,这两个属性可以像一般的 CSS 的属性一样使用于 HTML 元素,而这两个属性的值将被 paint 的第三个参数 properties 获得,被用于生产图像。所以,如果修改 textarea 的 --checkerboard-spacing 或者 --checkerboard-size 属性,背景图将会发生改变,看下效果:

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180123G025W900?refer=cp_1026

相关快讯

扫码关注云+社区