用css画图涉及到哪些

发布网友发布时间：2022-04-22 17:30

共2个回答

懂视网时间：2022-05-08 10:01

本篇文章给大家带来的内容是关于CSS届的绘图板CSS Paint API简介，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

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

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

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

例如，我们希望创建一个透明图片背景。类似下面这样：

下载.png

则完整的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） {
// 这里就是绘制的代码了…
}
}）；

热心网友时间：2022-05-08 07:09

如果你说的是CSS样式。那么CSS所有都涉及渲染部分。
如果你说的是像canvas那样画图的话，你需要了解paintWorklet。