CSS届的制图板CSS●▂● Paint API介绍

一、把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应用的固定不动招数：

1. CSS中paint(abc)；
2. JS加上控制模块CSS.paintWorklet.addModule(‘xxx.js’);
3. xxx.js中编码招数固定不动，在下边注解部位写绘图编码就可以；

registerPaint('abc', class {
    paint(context, size, properties) {
       // 绘图编码在这里里....
    }
});

在其中paint(context, size)中的2个主要参数能够略微详细介绍下：

context

为绘图左右文，全名是PaintRenderingContext2D，和Canvas的CanvasRenderingContext2D是旁系，API所有来源于Canvas，如出一辙，但是因为安全性限定，一些Canvas中的一些API不是能应用的，能用和不能用的API见下表：

  Paint能用API Paint不能用API CanvasState CanvasImageData CanvasTransform CanvasUserInterface CanvasCompositing CanvasText CanvasImageSmoothing CanvasTextDrawingStyles CanvasFillStrokeStyles – CanvasShadowStyles – CanvasRect – CanvasDrawPath – CanvasDrawImage – CanvasPathDrawingStyles – CanvasPath –

size

size是一个包括了绘图规格的目标，数据信息构造以下：

{
    width: 180,
    height: 180
}

size的尺寸遭受background-size特性尺寸的危害，因而，针对反复情况，能够依靠background-repeat开展平铺循环系统，无需非要在绘图的JS编码中循环系统。比如，下边将要要展现的demo实际效果，还可以那么完成，CSS一部分：

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

随后，paint-grid.js中只必须添充白-灰-灰-白，4个方格就行了，不用循环系统。properties能够用于得到get到的CSS特性和特性值，包含CSS自变量值；及其别的一些主要参数。

眼看为实，您能够狠狠地地址击这儿：CSS Paint API绘图全透明方格做为情况demo（现阶段仅Chrome合理果）

实际效果以下截屏：

paint-grid.js中的详细绘图编码以下：

registerPaint('transparent-grid', class {
    paint(context, size) {
        // 2个方格色调
        var color1 = '#fff', color2 = '#eee';
        // 方格规格
        var units = 8;
        // 横轴数轴循环系统解析xml下
        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) {
        // 2个方格色调
        var color1 = '#fff', color2 = '#eee';
        // 2个乳白色方格
        context.fillStyle = color1;
        context.fillRect(0, 0, 8, 8);
        context.fillRect(8, 8, 8, 8);
        // 2个深灰色方格
        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照片（
toDataURL()方式）或是Blob照片（toBlob()方式）。

CSS Paint API的优点取决于：其做为一个CSS特性值，3D渲染是即时的，全自动跟随访问赏识绘的，因而，要是大家的绘图是和CSS自变量有关联的，全部的3D渲染实际效果都是即时更新重绘，这可就厉害变大！

還是上边的全透明方格事例，方格的色调及其方格的规格，大家能够将其做为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) {
        // 2个方格色调
        var color1 = properties.get('--color1').toString();
        var color2 = properties.get('--color2').toString();
        // 方格规格
        var units = Number(properties.get('--units'));
        // 绘图编码，和以前一样...
    }
});

静态数据实际效果是一样的：

可是，假如大家改动了CSS编码中界定的自变量值，则，大家能看到Paint情况图即时转变实际效果（见下GIF）：

眼看为实，您能够狠狠地地址击这儿：CSS自变量另加Paint API绘图全透明方格demo

不用附加的定时执行器，真正时3D渲染，操纵十分便捷。

相互配合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更可用于动态性情景，合适完成必须即时绘图3D渲染的要求；假如是纯静态数据展现，立即就用JS加Canvas完成得了，没必需以便技术性而技术性。

CSS Houdini以及有关的新技术应用可玩的物品许多，之后有机化学会再好多详细介绍，文中就到这儿，谢谢您的阅读文章！

参照文本文档

https://www.w3.org/TR/css-paint-api-1/https://css-houdini.rocks/

最终的最终
最终，再聊点其他你可以能很感兴趣的物品。针对文中的全透明方格实际效果，实际上最好的完成方式是立即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动漫。

文中为原創文章内容，会常常升级专业知识点及其调整一些不正确，因而转截请保存原出處，便捷追溯，防止老旧不正确专业知识的欺诈，同时有更强的阅读文章感受。
文中详细地址：https://www.zhangxinxu.com/wordpress/?p=8204

到此这篇有关CSS届的制图板CSS Paint API介绍的文章内容就详细介绍到这了,大量有关CSS Paint API內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！