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,一模一样,不过由于安全限制&