CreateJSでCanvasに文字のスタンプ


2015年04月24日
With
CreateJSでCanvasに文字のスタンプ はコメントを受け付けていません

最近、JavaScriptの勉強をしなおしています。いろいろ調べてみたところ「CreateJS」というフレームワークが元ActionScript使いの僕には使い勝手がいいようなので、以前Flashで作ったくだらない小さなプログラムを、少しずつCreateJSで作り直してみたいというのが近ごろの関心事で。

ひとまず、Canvasにテキストを出す方法を知りたくてこんなものを作ってみました。






フォームに短いテキストを入力し、「Stamp!」ボタンを押すと、四角で囲まれたCanvas要素のランダムな場所に、ランダムな大きさと色で、そのテキストが「ポン」と押されます。Stampボタンを続けて押していくと、どんどんCanvas上に文字が増えます。フォームにはデフォルトで顔文字が入っていますが、何も入力されていない状態でStampを押すと、「Hello, World!」と表示されます。途中でフォーム上のテキストを書き換えると、それ以降は新しいテキストでスタンプされます。画面がわけわかんなくなったら「Clear」ボタンを押すと一からやり直しです。

テキストの要素が案外簡単に画面に描けることが分かったんで、結構いろいろできそうです。むかしFlashで作った「ベル●イユのばらトレーニング」のJavaScript実装版とかイケるかな?