Forked from: phi's canvas を画面にフィットさせよう(解像度は固定) - tmlib.js 怒濤の 100 サンプ View Diff (24)

Fork
0
Fav
0
View
1460
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 48 lines
  • HTML 1 lines
  • CSS 1 lines

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

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

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

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

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

Links

  • 合成タイプを設定しよう(destination-over) - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編
  • tmlib.js v0.1.3
  • 合成タイプを設定しよう(destination-over) - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

phi

Author

  • Twitter
  • Github

ゲームプログラマやりながら執筆してる27歳. phina.js(tmlib.js) というライブラリ作ってます. 著書「enchant.js スマートフォンゲーム開発講座」 『日本国民全員プログラマ化計画』進行中 Math/JavaScript/HTML5/CSS3/Python/C/C++/C#/Java

Blog http://phiary.me

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags