用法
你需要一个 dom
元素来渲染 ascii 。
<!-- Pre elements are perfect for this. -->
<pre class="ascii-element">
</pre>
接下来,需要初始化库。 第二个参数是你在渲染方形中所需的宽度和高度属性。ascii 将在它们内部中心呈现,并且用白色空间填充其余部分。
// Initialize AsciiMorph
var element = document.querySelector('pre');
AsciiMorph(element, {x: 50,y: 25});
然后你可以渲染元素,让它们通过变形来转换。
// First, define some ascii art.
var bird = [
" /",
" /",
" /;",
" //",
" ;/",
" ,//",
" _,-' ;_,,",
" _,'-_ ;|,'",
" _,-'_,..--. |",
" ___ .'-'_)' ) _)\\| ___",
" ,'\"\"\"`'' _ ) ) _) ''--'''_,-'",
"-={-o- /| ) _) ) ; '_,--''",
" \\ -' ,`. ) .) _)_,''|",
" `.\"( `------'' /",
" `.\\ _,'",
" `-.____....-\\\\",
" || \\\\",
" // ||",
" // ||",
" _-.//_ _||_,",
" ,' ,-'/"
]
var mona = [
" ____",
" o8%8888,",
" o88%8888888.",
" 8'- -:8888b",
" 8' 8888",
" d8.-=. ,==-.:888b",
" >8 `~` :`~' d8888",
" 88 ,88888",
" 88b. `-~ ':88888",
" 888b ~==~ .:88888",
" 88888o--:':::8888",
" `88888| :::' 8888b",
" 8888^^' 8888b",
" d888 ,%888b.",
" d88% %%%8--'-.",
"/88:.__ , _%-' --- -",
" '''::===..-' = --. `",
]
// Then, you can render (will render instantly)
AsciiMorph.render(bird);
// Then morph, to a new creation
AsciiMorph.morph(mona);
演示
2016-12-21