{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学
プロダクトデザイン専攻卒業 ->
GUIデザイン会社勤務 ->
\n現在フロントエンジニア
\n
\nMy site ->
\nwww.mwrote.com\n"}},"markdownRemark":{"id":"3a8f96d7-8238-57b2-be53-57c0bab5d727","html":"

\n

leonsansというライブラリを使うと、Canvas上にJavaScriptで文字を描くことができます。

\n

公式のサンプルをみると実際にどんなことができるのかがわかります。
\n組み合わせとアイデア次第では無限大にいろいろできすそうです。
\nメニューごとのサンプルやGithubにGIF画像もあります。

\n

\n \n \n \n \n \n \n \n使い方

\n

CDNやnpmパッケージは用意されていません。
\nGithubからダウンロードし、\nzip展開したあとにでてくるdist/leon.jsファイルをHTMLから読み込ませましょう。

\n
<script src=\"leon.js\"></script>
\n

\n \n \n \n \n \n \n \n描画する

\n

LeonSansをnewし、draw関数の引数にCanvasの2D Contextをわたすことで、Canvas上に描画されます。

\n
const canvas = document.createElement('canvas');\ncosnt ctx = canvas.getContext(\"2d\");\n\nleon = new LeonSans({\n    text: 'The quick brown\\nfox jumps over\\nthe lazy dog',\n    color: ['#000000'],\n    size: 80,\n    weight: 200\n});\n\nleon.draw(ctx);
\n

PIXIの場合は、drawの代わりにdrawPixi関数を使用します。

\n
leon.drawPixi(graphics)
","fields":{"slug":"/2019-09-05_JSでアニメーションできるフォントleonsans/"},"tableOfContents":"","frontmatter":{"date":"2019.09.05","title":"JSでアニメーションできるフォントleonsans","cover":"","category":"Coding","excerpt":"CanvasやPIXI.js上で展開できるプログラマブルなフォントleonsansを紹介します。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"3a8f96d7-8238-57b2-be53-57c0bab5d727","next":{"path":"/2019-09-02_p5jsのコードをsketchファイル上で実行する方法/","title":"p5jsのコードをsketchファイル上で実行する方法","category":"Coding"},"prev":{"path":"/2019-09-08_アトミックデザインはコンポーネント再利用の設計方法/","title":"アトミックデザインはコンポーネント再利用の設計方法","category":"Design"},"relatedPosts":[{"id":"2e52640f-36d6-5268-99ea-9d58492ffec5","fields":{"slug":"/2019-09-14_p5-jsを本番サイトで使う方法/"},"frontmatter":{"title":"p5.jsを本番サイトで使う方法","date":"2019-09-14T00:00:00.000Z","excerpt":"p5.jsをいざプロダクションビルド(本番サイト向け)で使う場合、一体どのような方法で使うのが最適でしょうか。p5.jsの特徴を踏まえ、代表的な使い方をご紹介します。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"d5a69a1d-62b7-5a8b-8f18-975dfee3ae96","fields":{"slug":"/2019-09-11_p5-jsスケッチトレーニング-円弧の線を円周上に沿って動かす/"},"frontmatter":{"title":"p5.jsスケッチトレーニング -円弧の線を円周上に沿って動かす-","date":"2019-09-11T00:00:00.000Z","excerpt":"p5.jsのarcと簡単なEasing式を使い、円弧の線を動かします。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"a9f2125a-caa7-5d36-a7d1-c68b1a35d0fa","fields":{"slug":"/2019-07-15_Ptsjsによる実践ジェネラティブアート/"},"frontmatter":{"title":"Pts.jsによる実践ジェネラティブアート","date":"2019-07-15T00:00:00.000Z","excerpt":"Ptsという幾何学的な図形を描画するのに特化したJavaScriptライブラリをご紹介します。","templateKey":"post","category":"Coding","propertags":["ptsjs"],"commontags":["generative","javascript"]}},{"id":"1eb35481-156d-520b-ab66-a911316fe17b","fields":{"slug":"/2019-07-03_Webで簡単にコードで絵を描くp5-js/"},"frontmatter":{"title":"Webで簡単にコードで絵を描くp5.js","date":"2019-07-03T14:15:51.667Z","excerpt":"描画ライブラリp5.jsとCodepenを使い、ブラウザ上で簡単にスケッチを描く方法を紹介します。","templateKey":"post","category":"Coding","propertags":["p5js"],"commontags":["generative","javascript"]}},{"id":"156242f5-f991-540a-8b82-2321b7bbc8a9","fields":{"slug":"/2019-08-21_ブラウザで機械学習が実行できるml5jsを試してみる/"},"frontmatter":{"title":"ブラウザで機械学習が実行できるml5jsを試してみる","date":"2019-08-21T00:00:00.000Z","excerpt":"フロントエンドエンジニアは絵を描くのが苦手だけど、絵をブラウザで表示するのは得意です。それと同じことが、機械学習でも起こるのでは？そんな近未来を予感させてくれるような、ブラウザ実行型のライトウェイトな機械学習ライブラリml5jsを紹介します。","templateKey":"post","category":"Coding","propertags":["ml5js"],"commontags":["ml","generative","javascript"]}}]}}