アスキーアートを描くのは専用のエディタを使うほど、手間がかかる作業になります。記号を組み合わせてイラストを描きますのでペイントほど柔軟にはいきません。慣れるまでに相当な時間を要するでしょう。 そこで使ってみたいのがCharCanvas.jsです。計算によってアスキーアートを作成します。

CharCanvas.jsの使い方

まずは単一文字の背景です。

var cc = new CharCanvas(70, 20, '-');
cc.print();

さらに若干カスタマイズ。

var cc = new CharCanvas(70, 20, ['*', '+', ':']);
cc.print();

円と四角とラグビーボール。

var cc = new CharCanvas(70, 20, '-');

// 円
cc.fillFnc('areaCircle', '@', 16, 10, 14, 7);

// 四角
cc.fillFnc('areaRect', ['/', ':',  '/'], 20, 7, 30, 7);

// ラグビーボール
var mask = cc.areaCircle(45, 10, 14, 7)
    .opAnd(cc.areaCircle(57, 10, 14, 7));
cc.fillArea(mask, '*');

cc.print();

三日月（塗り、線）、リング。

var cc = new CharCanvas(70, 20, '-');

// 三日月（塗り）
var mask = cc.areaCircle(15, 10, 14, 7)
  .opNot(cc.areaCircle(25, 10, 14, 7));
cc.fillArea(mask, '@');

// 三日月（線）
var mask = cc.areaCircle(30, 10, 14, 7)
  .opNot(cc.areaCircle(40, 10, 14, 7));
cc.strokeArea(mask, '@');

// リング
var mask = cc.areaCircle(50, 10, 14, 7)
  .opNot(cc.areaCircle(50, 10, 10, 5));
cc.fillArea(mask, '@');

cc.print();

パス。

var cc = new CharCanvas(70, 20, '-');

// 左
var x = 0;
var ln = cc
  .moveTo(x + 4,  1)
  .lineTo(x + 16, 18)
  .lineTo(x + 22, 6)
  .lineTo(x + 15, 12)
  .lineTo(x + 2,  12)
  .close();
cc.fillArea(ln, '@');

// 中央
var x = 22;
var ln = cc
  .moveTo(x + 4,  1)
  .lineTo(x + 16, 18)
  .lineTo(x + 22, 6)
  .lineTo(x + 15, 12)
  .lineTo(x + 2,  12)
  .close()
  .fillPath();
cc.fillArea(ln, '@');

// 右
var x = 44;
var ln = cc
  .areaPath(
    x + 4,  1,
    x + 16, 18,
    x + 22, 8,
    x + 15, 12,
    x + 2,  12)
  .fillPath();
cc.fillArea(ln, ['*', '+']);
cc.print();

文字。

var cc = new CharCanvas(70, 20, '-');
cc.drawText(10, 5, 'hello world!\nThis is a CharCanvas.');
cc.drawTextZ(10, 10, 'こんにちは世界!!\nこれは、文字キャンバスです。');
cc.print();

拡大文字。

var cc = new CharCanvas(70, 40, '-');
var mask = cc.areaText(2, -3, '顔貌', 20, 'sans-serif', 0.85, 1.7)
	 .opOr(cc.areaText(5, 17, '売人', 20, 'sans-serif', 0.85, 1.6));
cc.fillArea(mask, '#');
cc.print();

HTML5でCanvasというと図形を描画しますが、CharCanvas.jsではアスキーアートを出力します。線や曲線を組み合わせたり、文字を描画することで様々な図形が描けるようになるでしょう。様々な応用ができそうなソフトウェアです。

CharCanvas.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

masakazu-yanai/char-canvas: Draw Tool for Ascii Art.