有件事儿挺好玩儿的，那就是CSS绘图~不是只能用图片、SVG或Canvas给网页打扮吗？猜猜，CSS还能画图！都说它简单，有些人认为它根本不算程序语言。然而，其实人家CSS的画功还真不是盖的哦～
div class="box">
CSS的绘图能力
.box {
width: 180px;
height: 180px;
border: 1px solid;
background: paint(xxxx); // 主角在此
}
if (window.CSS) {
// 因为加载文件 需要启动server
CSS.paintWorklet.addModule("./paint-grid.js");
}
说实话，CSS不擅长画太复杂的图形，它主要负责网页的外观。但你知道吗？现在已经有办法把这个家伙变成一个小小画家了！利用一些特定的属性和技巧，其实CSS也能搞出一些简单又好玩的图形效果。
registerPaint(
"xxxx", // 这就是: 方法名
class {
paint(context, size) {
context.fillStyle = 'red';
context.fillRect(10, 10, 39, 39);
}
}
);
这儿得了解下啥叫CSS画图！它不是直接像SVG或者Canvas那样画出图形，而是通过调整元素的边框、背景和渐变之类的东西来达到视觉效果！这个方法听起来挺曲折，不过有时候也会有惊喜喔！
registerPaint(
"xxxx1",
class {
paint(context, size) {
context.fillStyle = 'red';
context.fillRect(10, 10, 39, 39);
}
}
);
registerPaint(
"xxxx2",
class {
paint(context, size) {
context.fillStyle = 'green';
context.fillRect(10, 10, 39, 39);
}
}
);
CSS变量的妙用
.box {
background: paint(xxxx1);
}
.box2 {
margin-top: 20px;
background: paint(xxxx2);
}
css画图里，你得学会用变量，这可是关键。它能帮你设定一些通用的属性值，然后直接用到不同的元素或者样式里面去，这样一来，不光省了不少代码，代码的易读性和可维护性也大大提升了！
// 在全局定义方便js修改
:root {
--bg-size: 60;
}
用CSS变量的话，处理动态图会更容易。比如要让图形跟着用户操作变个色儿，大点儿小点儿或者换个形状啥的，直接改下变量值就能搞定！这招既简单又灵活。
registerPaint(
"xxxx1",
class {
static get inputProperties() {
return ["--bg-size"];
}
paint(context, size, properties) {
var bgSize = properties.get('--bg-size');
context.fillStyle = "red";
context.fillRect(10, 10, bgSize, bgSize);
}
}
);
CSS与JavaScript的结合
CSS能画点图，但有时候还得用JavaScript加强功能。JavaScript让我们能够动态制作CSS风格，或者按着用户动作实时调整元素样子。
p {
font-size: 150px;
color: white;
-webkit-text-stroke: 6px red;
}
比如用JavaScript就能监控你在网页上点击了什么地方，然后根据这个信息改变页面的样子。这样做会让网页更有互动性，用户看着也舒心。
p {
font-size: 150px;
color: white;
-webkit-text-stroke: 6px red;
background-color: rosybrown;
background-image: -webkit-linear-gradient(top, red, #fd8403, yellow);
-webkit-background-clip: text;
color: transparent;
}
CSS绘图的局限性
高
低
说起来，虽然CSS画图挺好用的，但是，它也有解决不了的问题。比如说，想要画出那些复杂到爆的3D图形或者做动效的话，有点难哟。再说了，它在弄3D特效这块儿也就那么回事，还达不到我们需要的那种层次。然后，就是CSS动画的速度也比不上用JavaScript或者Canvas来做。
还有，用CSS画图的时候，别忘了想想浏览器兼容性的事儿。现在浏览器对CSS的支持确实挺好的，但是有些老版本的浏览器可能不太行。所以咱们做设计和开发的时候得考虑到这个问题。
div {
font-size: 150px;
background: url(../imgs/jojo.webp) no-repeat;
background-size: 100%;
background-origin: border-box;
-webkit-background-clip: text;
color: transparent;
}
CSS绘图的未来
虽然有些限制，但是CSS画图之类的东西还是挺让人激动的。毕竟，浏览器技术在进步，还有Web标准也在完善，CSS画图功能会变得更厉害。以后说不定，CSS就变成了网页设计和开发里头必不可少的一部分！
总的来说CSS虽不算专业绘画技巧，但是它有自己那种独到的魔力哦～学习并尝试运用后会发现，CSS除了可以帮我们设计漂亮的网站外，还能创作出一些既简单又好玩儿的图像效果！希望我今天和大家共享的内容能激发点什么有意思的灵感，让咱们都来发掘CSS这玩意儿的无穷可能！
总结与展望
看完咱们这回聊的，你会发现，CSS画出的图案虽有些小毛病，但用起来还是挺给力的。用它，我们就能搞出一些好玩儿的图形效果，而且还能让代码更容易看懂、修改。
nbsp;html>
#wrap {
background-color: black;
width: 500px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
.box0 {
background: url(../imgs/jojo.webp) no-repeat;
}
.box1 {
background: url(../imgs/一起干饭.jpeg) no-repeat;
}
.box2 {
background: url(../imgs/gat.webp) no-repeat;
}
#box {
width: 500px;
height: 500px;
font-size: 150px;
margin: 0 auto;
background-size: 500px 500px;
background-position: center;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
.text {
display: none;
}
①
②
③
const oBox = document.getElementById("box");
const textArr = document.getElementsByClassName('text')
let i = 0;
let n = 800;
setInterval(()=>{
oBox.style.fontSize = n + 'px';
n+=3
if(n > 800){
n = 10;
textArr[1].style.display = 'none'
textArr[2].style.display = 'none'
textArr[0].style.display = 'none'
textArr[i].style.display = 'block'
oBox.classList.remove('box1')
oBox.classList.remove('box2')
oBox.classList.remove('box3')
oBox.classList.add(`box${i}`)
i++
if(i > 2){
i = 0
}
}
},5)
在未来，随着网络标准不断升级，相信CSS绘图将会越来越强大且便捷，除了让网页颜值更高外，还能帮咱们做出更有创意、互动性更强的页面设计！
小伙伴们，下面有个小问题哈：你们有试过用CSS画图吗？讲真的，你们觉得这个功能怎么样？不论是优势还是挑战，都可以在评论里畅所欲言。别忘了给我们点赞转发，让更多的朋友们发现CSS绘制的有趣之处！
jojo的奇妙冒险
评论0