最近看到一篇比较有趣的文章
程序员的浪漫–console.log()在浏览器控制台输出特殊字符编码的图案
想自己动手试一试,很明显我做的效果不好,弄了很久还是没弄出来
![在这里插入图片描述](https://img-blog.csdnimg.cn/e4664812f5b44a95aefaab581375b146.png)
下面介绍另外一种方法,方法来自—— 使用console.log打印公司招聘信息和字符画
一、首先需要得到我们想要的字符图案 可以去这个网站生成 http://patorjk.com/
- 在白色框内输入想要的字符(ps:有的样式不支持数字、或者不支持同时有数字和字母的字符串,不支持中文字符)
- 左侧菜单可以选择字体样式,下方会实时显示结果
- 也可以选择test all查看到所有样式结果
![在这里插入图片描述](https://img-blog.csdnimg.cn/1d850b1132714c759aa1717895733e72.png)
二、代码编写
主要函数
let string = function () {
}
<script>
function makeMulti (string) {
let l = new String(string)
l = l.substring(l.indexOf("/*") + 3, l.lastIndexOf`("*/"))`
return l
}
let string = function () {
}
console.log(makeMulti(string));
console.log();
</script>
三、控制台输出结果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/81430c641a804cd59bb436e7004be467.png)
更新: 自定义图像的输出
我们可以在下面的网站中复制图片链接,生成字符图案
https://www.degraeve.com/img2txt.php
一、生成字符图像:
根据网页内容提示,复制图像链接、选择相应选项并应用![在这里插入图片描述](https://img-blog.csdnimg.cn/55428ff6e650450bbcc2d6872bec798b.png)
这里我们选择这样画面简单的图像,根据需求调节参数并应用
![在这里插入图片描述](https://img-blog.csdnimg.cn/f9fb4833fd604d189533b2d23b41fac7.jpeg)
二、将生成的字符图案复制到代码块中(同上)
三、实现结果
左侧为生成的字符图案、右侧为控制台输出的图案,但是可以看出图像是有被拉伸的
![在这里插入图片描述](https://img-blog.csdnimg.cn/a612176339014611b4a96972c5511503.jpeg)
一些制作字符图案的网站
- 根据文字生成字符画:
http://patorjk.com/software/taag
http://www.network-science.de/ascii/ - 根据图片生成字符画:
http://www.degraeve.com/img2txt.php
http://life.chacuo.net/convertphoto2char
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)