tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

tmlib.js のハッカソンイベントをやることになりました!! っということでそれまでにバンバン tmlib.js のエントリーを投稿していこうと思います.

今回はその第一弾! Graphics(HTML5 Canvas) 編です. このサイトでお馴染みの怒濤シリーズ. tmlib.js の Graphics 周りの機能についてのサンプルを作りまくってみました.

怒濤って何?って方はこちらをどうぞ

tmlib.js で定義されている tm.graphics.Canvas クラスは HTML5 Canvas を拡張したものなので HTML5 Canvas の機能は基本的にそのまま使えます. なので HTML5 Canvas の勉強にもなるかと思います.

また, それに加え星型や多角形といった複雑な図形を簡単に描画したり, モノクロフィルタやブラーフィルタを掛けて遊んだりってことができます. ゲームへの応用も簡単にできます.(ゲームへの応用は次回やる Application 編で詳しく説明します)

もちろんサンプルは jsdo.it に全て移植してあるので実際に実行したり, fork してイジッたりして遊んでもらえると嬉しいです.

Table of contents

tmlib.js って何?

tmlib.js 知らない人はとりあえず下記のスライドを御覧ください.

Slide

ざっくり言うと, ゲーム作ったりツール作ったり色々やれる ライブラリですw

up

怒濤のサンプル

基礎

図形-初級(Figure)

図形-中級(Figure)

色, グラデーション(Color, Gradient)

イメージ

テキスト(Text)

透明度・合成

ラインスタイル(Line Style)

影(shadow)

変形

ピクセル操作

図形(上級)

※ここから下は近々公開します. サンプル自体はすでに全て作ってあるので先に欲しいって方は Twitter もしくは Mail でご連絡ください. 個別に zip か何かで渡します

その他

up

tmlib.js hackthon #1

tmlib.js hackthon #1 〜JavaScript をより使いやすく, より便利に, そしてより豊かにをモットーとする「tmlib.js」のハッカソンイベント開催〜』という ハッカソンイベントを行います.

HatchUP さん主催の TechBuzz というイベントの一つとして行います.

前回 tmlib.js についてプレゼンしたのがキッカケでお話を頂きました. いやはやありがたい.

少しでも興味があれば気軽に参加していただけたらと思います.

何をやるか具体的な内容はこれから詰めていく予定です.

  • みんなそれぞれゲーム作って
  • みんなで Web 上にアップして
  • みんなでプレイし合って
  • みんなでレビューし合って
  • みんなで楽しめれば

良いなぁ~なんて漠然と思ってたりします.

これをやりたい, あれをやって欲しいなどありましたら気軽に @phi_jp とかに投げてもらえると嬉しいです.

up

また, 近々上記以外の言語やライブラリについての怒濤サンプル集を大量に公開する予定です. 期待しててください!!

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT