一、把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，如出一辙，不过因为平安限定，有些Canvas中的有些API是不能运用的，可用和不可用的API见下表：
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有结果）
通明格子结果demo
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图片（
toDataURL（）要领）或许Blob图片（toBlob（）要领）。
CSS Paint API的上风在于：其作为一个CSS属性值，衬着是及时的，自动随着阅读重视绘的，因而，只需我们的绘制是和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背景图及时变化结果.
及时转变变量后的尺寸变化
眼见为实，您能够狠狠地点击这里：CSS变量外加Paint API绘制通明格子demo
无需分外的定时器，真及时衬着，掌握异常轻易。
合营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 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简介的悉数引见，假如您想相识更多有关CSS3教程，请关注ki4网。
以上就是CSS届的绘图板CSS Paint API简介的细致内容，更多请关注ki4网别的相干文章！
