css 图标点击变色,纯CSS实现小图标变色的一些研究

by zhangxinxu from www.zhangxinxu.com/wordpress/?…

本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、把Canvas图片作为CSS背景图片

CSS Paint API可以简单理解为(实际不能等同)把Canvas画布作为普通元素的背景图片。

也就是CSS的background-image就是一个Canvas，我们可以利用Canvas绝大多数API绘制各种复杂有趣的图形效果，以一种更高效的方式丰富web页面元素的视觉展现。例如，蓝色按钮不仅仅是个蓝色背景，上面还有白云漂漂的效果，想想就很棒！

二、一个简单的案例了解CSS Paint API

例如，我们希望创建一个透明图片背景。类似下面这样：

则完整的CSS代码和JS部分代码如下：

.box {

width: 180px; height: 180px;

/* transparent-grid自己命名 */

background-image: paint(transparent-grid);

}复制代码

然后绘制图形的JS务必作为模块引入，例如，建一个名为paint-grid.js的文件，在页面上引入：

if (window.CSS) {

CSS.paintWorklet.addModule('paint-grid.js');

}复制代码

paint-grid.js文件代码如下：

// transparent-grid命名和CSS中的对应

registerPaint('transparent-grid', class {

paint(context, size) {

// 这里就是绘制的代码了....

}

});复制代码

以上就是CSS Paint API使用的固定套路：

CSS中paint(abc)；

JS添加模块CSS.paintWorklet.addModule(‘xxx.js’);

xxx.js中代码套路固定，在下面注释位置写绘制代码即可；

registerPaint('abc', class {

paint(context, size, properties) {

// 绘制代码在这里....

}

});复制代码

其中paint(context, size)中的两个参数可以稍微介绍下：

context

为绘制上下文，全称是PaintRenderingContext2D，和Canvas的CanvasRenderingContext2D是近亲，API全部来自Canvas，一模一样，