主页 / 建站知识 /

CSS届的绘图板CSS Paint API简介

建站知识 2021-07-03 07:55www.168986.cn长沙网站建设

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

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

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

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

例如，我们希望创建一个透明图片背景。类似狼蚁网站SEO优化这样

则完整的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使用的固定套路

  1. CSS中paint(abc)；
  2. JS添加模块CSS.paintWorklet.addModule(‘xxx.js’);
  3. xxx.js中代码套路固定，在狼蚁网站SEO优化注释位置写绘制代码即可；
registerPaint('abc', class {
    paint(context, size, properties) {
       // 绘制代码在这里....
    }
});

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

context

为绘制上下文，全称是PaintRenderingContext2D，和Canvas的是近亲，API全部来自Canvas，一模一样，不过由于安全限制，有些Canvas中的有些API是不能使用的，可用和不可用的API见下表

 

Paint可用API Paint不可用API
CanvasState
CanvasUserInterface
CanvasText
CanvasImageSmoothing CanvasTextDrawingStyles
CanvasFillStrokeStyles –
CanvasShadowStyles –
CanvasRect –
CanvasDrawPath –
–
CanvasPathDrawingStyles –
CanvasPath –

size

size是一个包含了绘制尺寸的对象，数据结构如下

{
    width: 180,
    height: 180
}

size的大小受到background-size属性大小的影响，，对于重复背景，可以借助background-repeat进行平铺循环，不用非得在绘制的JS代码中循环。例如，狼蚁网站SEO优化即将要展示的demo效果，也可以这么实现，CSS部分

.box {
    width: 180px; height: 180px;
    background-image: paint(transparent-grid);
    background-size: 16px 16px;
}

然后，paint-grid.js中只需要填充白-灰-灰-白，4个格子就好了，无需循环。properties可以用来获得get到的CSS属性和属性值，包括CSS变量值；以及其他一些参数。

眼见为实，您可以狠狠地点击这里（目前仅Chrome有效果）

效果如下截图

paint-grid.js中的完整绘制代码如下

registerPaint('transparent-grid', class {
    paint(context, size) {
        // 两个格子颜色
        var color1 = '#fff', color2 = '#eee';
        // 格子尺寸
        var units = 8;
        // 横轴数轴循环遍历下
        for (var x = 0; x < size.width; x += units) {
            for (var y = 0; y < size.height; y += units) {
                context.fillStyle = (x + y) % (units  2) === 0 ? color1 : color2;
                context.fillRect(x, y, units, units);
            }
        }
    }
});

补充
类似格子这类重复背景，可以借助background-repeat进行平铺循环，不用非得在绘制的JS代码中循环，不过需要借助background-size属性帮助，改变绘制的尺寸。例如，上面demo效果，也可以这么实现，CSS部分

.box {
    width: 180px; height: 180px;
    background-image: paint(transparent-grid);
    background-size: 16px 16px;
}

然后，paint-grid.js中只需要填充白-灰-灰-白，4个格子就好了，无需循环。

registerPaint('transparent-grid', class {
    paint(context, size) {
        // 两个格子颜色
        var color1 = '#fff', color2 = '#eee';
        // 两个白色格子
        context.fillStyle = color1;
        context.fillRect(0, 0, 8, 8);
        context.fillRect(8, 8, 8, 8);
        // 两个灰色格子
        context.fillStyle = color1;
        context.fillRect(0, 4, 8, 8);
        context.fillRect(4, 0, 8, 8);
    }
});

要更通俗易懂些。

三、CSS变量让Paint API蓬荜生辉

上面的案例展示了CSS Paint API的基本使用，，虽然看上去新潮，但并没有体现出CSS Paint API有什么过人之处。

你想啊，我直接用JS加Canvas API绘制一个格子图案，转换成Base64，直接作为元素的背景图片显示，不也是一样的效果，而且兼容性更好（IE9+逗支持），所有Canvas API都能用，没有限制。对比一看，完全没有使用CSS Paint API的理由嘛！

没错！如果我们只是需要一个静态背景，真不如直接Canvas绘制再转换成Base64图片（
）或者Blob图片（）。

CSS Paint API的优势在于其作为一个CSS属性值，渲染是实时的，自动跟着浏览器重绘的，，只要我们的绘制是和CSS变量相关联的，所有的渲染效果都会实时刷新重绘，这可就牛逼大了！

还是上面的透明格子例子，格子的颜色以及格子的尺寸，我们可以将其作为提取出来，如下

.box {
    width: 180px; height: 180px;
    --color1: #fff;
    --color2: #eee;
    --units: 8;
    background: paint(custom-grid);
}

这些定义的变量我们可以在绘制的时候获取到，示意如下

registerPaint('custom-grid', class {
    // 获取3个变量
    static get inputProperties() {
        return [
            '--color1',
            '--color2',
            '--units'
        ]
    }
    paint(context, size, properties) {
        // 两个格子颜色
        var color1 = properties.get('--color1').toString();
        var color2 = properties.get('--color2').toString();
        // 格子尺寸
        var units = Number(properties.get('--units'));
        // 绘制代码，和之前一样...
    }
});

静态效果是一样的

，如果我们修改了CSS代码中定义的变量值，则，我们可以看到Paint背景图实时变化效果（见下GIF）

眼见为实，您可以狠狠地点击这里

无需额外的定时器，真实时渲染，控制非常方便。

配合CSS Properties & Values API，把--units等变量全部注册为合法的CSS属性，则，我们就能使用transition和animation属性纯CSS控制Paint背景图的运动和动画了，按钮上云朵漂漂的效果完全不在话下。

这个案例以后再介绍。

四、Houdini，兼容与其他

本文介绍的CSS Paint API是CSS Houdini的一部分，提到的CSS Properties & Values API也是，是目前Chrome已经支持的一部分API。CSS houdini可以自定义CSS属性，布局等，未来不可限量。

由于兼容性的问题，如果想要在实际项目中使用CSS Paint API，还需要做兼容处理，例如

.box {
    width: 180px; height: 180px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2P8////fwY84P379/ikGRhHDRgWYfDu3Tu86UBQUBB/Ohg1gIFx6IcBABlfVjmYTYi7AAAAAElFTkSuQmCC);
    background: paint(transparent-grid, whatever);
}

CSS Paint API更适用于动态场景，适合实现需要实时绘制渲染的需求；如果是纯静态展示，直接就用JS加Canvas实现得了，没必要为了技术而技术。

CSS Houdini及其相关的新技术可玩的东西很多，以后有机会再多多介绍，本文就到这里，感谢您的阅读！

参考文档

的
，再说点其它你可能感兴趣的东西。对于本文的透明格子效果，其实最好的实现方法是直接CSS background绘制，利用线性渐变和CSS3多背景。

代码如下

.box {
    width: 180px; height: 180px;
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

实时效果如下

尺寸控制非常方便，天然支持animation动画。

本文为原创文章，会经常更新知识点以及修正一些错误，网络推广网站推广转载请保留原出处，方便溯源，避免陈旧错误知识的误导，有更好的阅读体验。
本文地址

到此这篇关于CSS届的绘图板CSS Paint API简介的文章就介绍到这了,更多相关CSS Paint API内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章，希望大家以后多多支持狼蚁SEO！

上一篇：使用 CSS Paint API 动态创建与分辨率无关的可变背 下一篇：CSS实现鼠标移入时图片的放大效果及缓慢过渡效

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by