phpconsolelog色彩技巧_运用 consolelog 能玩出什么厉害的花活

比如打开掘金的掌握台，你能看到这样的 console.log 输出：

当然，你也可能看到一些开拓者一不留神留在生产环境的调试信息（笑）。

你可能知道，console.log 支持一些基本的 css 样式，console.log 能做到的远不止这些！
让我们看看 console.log 能整出哪些花活。

console.log 可以添加基本的 css，比如掘金的这行代码如下：

console.log('%c想要加入稀土掘金？投递简历：https://job.toutiao.com/s/idq6X5rb', 'color:#1e80ff;');

这里的 %c 指令将 CSS 样式运用于掌握台输出，指令前面的文本不会受到影响，但指令后面的文本将利用参数中的 CSS 声明设置样式。

你可以多次利用 %c,比如下面这段代码：

console.log( "Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message",);

显示效果如下图：

在 MDN文档 里你可以看到支持的 css 样式。

你在刷B站时见过B站的这个 console.log 么：

这种字符画被称为 ASCII Art，你可以在这种网站上考试测验天生你须要的字符。

ASCII Art，别号“笔墨图”、“字符画”，是一种紧张依赖电脑ASCII字符来表达图像的艺术形式，最早于1982年美国卡内基梅隆大学涌现。
我们常见的颜笔墨也是 ASCII Art 的一种！

╮(￣▽ ￣)╭ |

在前面的文档中，你可以创造了，css 样式中支持 background，那我们借助 background 岂不是可以插入图片？试试下面这段代码：

console.log('%c ', 'padding-left: 50px; line-height: 50px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAEgCAMAAAAjXV6yAAAANlBMVEVHcEwzMjQvJjgxJDcvJDgwJThRNTmfxWgy2SbD9nmh8GaOP121TVnCPS/qRCvtXj3ym2j2tXmABwdyAAAABXRSTlMABTvE+i919boAAAMySURBVHgB7dzLTsNmFIXR+BqKYwLv/7KlUsWkZ9P+lS3H1vrIFEssHXmyFW6vVdcP47RB49B3tysECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAATqeog7Qz6mEhrmtiwJ1/RC6h95C1wUaq6b5/kfZewKarws0VQH6HWgG5IJyLsgFuSAX5IJckAtyQYBckAtyQS7IBbkgF+SCAAHq6rYDGqsC0AX2r6UVaAj13cn3r7fQew10n+uG4N91Z9+/WoHyuyZ07pfxhkCtEoAAAQIECBAgQIAAAQIECBAgQIAAAQIE6LL71/5AdWfZvxLQdK997qEANA19qDvJ/jUGn3l5lC1zaKob83B4iv1rbAeaprn4+aWx6hWBplAz0AYBAgQIECBAgAABAgQIECBAVwACBAgQIECAAHV1LwhUd5r/f7j8pfGPzzdQmDXmto7ay/L3v9bQsnNr6KC9LH//a/2oe4RaIR6hj7r1oK9q5q395YCmqkOBAAECBAgQIEAhQA0+gAAt1wRyQYAAAQIECBAgQIC6sisA1e29fy0J6Pl4Pn4+WWhzoOa9bOf9K/p8hh7fv/HfP+2172U7718R6Kvs8/lxQFvtZfllfAGgqepCQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECNAzFIFCVwWK+9dX6DP0vCzQ1yYB+g4QIECAAAECBAgQIECAAAECBAgQIECAAAECZPZZTz8cbkbxqFtMz4AA/b8AAQIECBAgQIAAAQIECBAgQIAAAQIECBCgEKC/+5f9C1AOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI0AooXEroykCAAAECBAgQIECAAAECBAgQIECAAAECBAgQoLLzA41VCSjXD6FlLWt2W0Ot+1eUCA2hVqCuDw1zXetfNofWrS6lbujruuyTjYqa300ZaMrP2fddE7pt0hWAbjsFCBAgQIAAAQIECBAgQNsHCBAgQIAAAQIEqKwdKD/n+P0rt/Velmt9ztLYENobqG0vyw1tz8ntvn/tuZfl4j6Vn5Nr3L8OqRkonPqGQFtKAAIECBAgQIAAAQIECBAgQIAAAQIECBCg4wME6E+7tQcAK80eGwAAAABJRU5ErkJggg==) 100% / contain no-repeat;');

我把一张 png 图片转成了 base64 贴在了 background 中，把它贴在掌握台里看看效果！

须要把稳的是：

按照上面插入图片的思路，我们也可以在 background-image 里插入 svg，试试下面的效果：

console.log('%c ', `line-height:100px;padding-left:400px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,<svg viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'><style>path{stroke-dasharray: 400;animation: dash 10s linear;}@keyframes dash {to {stroke-dashoffset: 2000;}}</style><path d='M 0 50 Q 50 100 100 50 T 200 50 T 300 50 T 400 50 T 500 50' stroke='black' fill='transparent' stroke-width='10'></path></svg>")`)

（添加了一点线条动画 ）

比较起 svg 动画，html 结合 css 的动画我们更为熟习，console.log 中我们并不能直接渲染 html页面。
但是利用 svg 中的 foreignObject 元素，我们可以在 svg 中插入常见的 html 标签！
试试下面的代码：

console.log('%c ', `line-height:100px;padding-left:100px;background-repeat:no-repeat;background-image:url("data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spin {0% { transform: rotate(0deg); background: green; border-radius: 5px; }50% { transform: rotate(180deg); background: red; border-radius: 20px; }100% { transform: rotate(360deg); background: green; border-radius: 5px; }}.square {width: 50px;height: 50px;position: relative;left: 25px;top: 25px;background-color: red;animation: spin 2s linear infinite;}</style><foreignObject width='100' height='100'><div xmlns='http://www.w3.org/1999/xhtml' class='square'></div></foreignObject></svg>")`)

须要把稳的是：

作者：李章鱼链接：https://juejin.cn/post/7345105687453581351