mootools_MooTools ASCII Art

mootools

David Walsh Blog

I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create.  ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous;  ASCII art is good for a few giggles but that seems to be it.  A new MooTools class has hit the Forge:  MooAsciiArt.  Let's have some fun by turning images and DOM nodes into glorious, character-driven ASCII art.

直到我承认自己ASCII艺术比毕加索,莫奈或梵高所创造的作品更好时,我才意识到自己确实是个书呆子。 ASCII艺术具有无与伦比的美感,简单性以及……好吧,我太可笑了。 ASCII艺术对于一些傻笑是有好处的,但事实就是如此。 一个新的MooTools类进入了Forge: MooAsciiArt 。 通过将图像和DOM节点转变为光荣的,字符驱动的ASCII艺术,让我们玩得开心。

范例HTML (Sample HTML)

To illustrate how awesome this MooTools resource is, let's set up both an H2 tag and IMG tag to convert to beautiful ASCII art:

为了说明这个MooTools资源有多棒,让我们同时设置一个H2标签和IMG标签,以将它们转换为漂亮的ASCII艺术:


<h2>David Walsh Blog</h2>
<img src="/wp-content/themes/2k11/images/homeLogo.png" id="logoImage" alt="David Walsh Blog" />


These basic elements will be converted to glorious ASCII art!  The anticipation should be viagra to your geeky mind!

这些基本元素将转换为辉煌的ASCII艺术! 令人讨厌的人应该对伟哥有所期待!

MooTools JavaScript (The MooTools JavaScript)

There are two ways to use MooAsciiArt:  images or basic DOM nodes.  Using MooAsciiArt on images is simple;  simply use the toAsciiArt method to convert your image to ASCII art:

有两种使用MooAsciiArt的方法 :图像或基本DOM节点。 在图像上使用MooAsciiArt很简单; 只需使用toAsciiArt方法将您的图像转换为ASCII艺术作品:


document.id("logoImage").toAsciiArt(true);


You may also use MooAsciiArt's convertTags method to convert DOM nodes to ASCII art:

您也可以使用MooAsciiArt的convertTags方法将DOM节点转换为ASCII艺术作品:


MooAsciiArt.fontPath = "MooAsciiArt/Demo/fonts/"
MooAsciiArt.convertTags({ h2:"Doom" });


The string that accompanies the tag name is the "flf" font file which represents the character representation for every letter.  The following is a snippet of the "Doom.flf" file:

标记名称附带的字符串是“ flf”字体文件,该文件表示每个字母的字符表示形式。 以下是“ Doom.flf”文件的摘要:


       @@
 ______@
|___  /@
  $/ / @
  / /  @
./ /___@
\_____/@
       @
       @@
 ___ @
|  _|@
| |  @
| |  @
| |  @
| |_ @
|___|@
     @@
__     @
\ \    @
 \ \   @
  \ \  @
   \ \ @
    \_\@
       @
       @@
 ___ @
|_  |@
  | |@
  | |@
  | |@
 _| |@
|___|@
     @@
 /\ @
|/\|@
  $ @
  $ @
  $ @
  $ @
    @
    @@
        @
        @
        @
        @
        @
    $   @
 ______ @
|______|@@
 _ @
( )@
 \|@
 $ @
 $ @
 $ @
   @
   @@
       @
       @
  __ _ @
 / _` |@
| (_| |@
 \__,_|@
       @
       @@
 _     @
| |    @
| |__  @
| '_ \ @
| |_) |@
|_.__/ @
       @
       @@



The FLF file allows you to create your own font formats, so creating your own fonts can be super easy.

FLF文件使您可以创建自己的字体格式,因此创建自己的字体非常容易。

You could be the next great artist.  The next Picasa Webcasso.  In all seriousness, ASCII art is pretty fucking cool.  It's our way to rebel against the hippie artists that don't understand that our code is art.  If you like ASCII art like I do, you'll love this awesome MooTools class.

您可能会成为下一位伟大的艺术家。 下一个 Picasa Webcasso。 认真地说,ASCII艺术真是太酷了。 这是我们抵制那些不了解我们的代码是艺术的嬉皮士艺术家的方式。 如果您像我一样喜欢ASCII艺术,您会喜欢上这个很棒的MooTools类的。

翻译自: https://davidwalsh.name/mootools-ascii-art

mootools

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值