提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS届的绘图板CSS Paint API简介【css教程】,绘图板CSS,Paint API简介

本篇文章给人人带来的内容是关于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运用的牢固套路:

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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS届的绘图板CSS Paint API简介【css教程】,绘图板CSS,Paint API简介"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线