2012-11-22 02:21:07

License: MIT License

Fork: 0

Fav: 0

View: 1540

Play
Stop
Reload

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-in) - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編
tmlib.js v0.1.3

// forked from phi's "canvas を画面にフィットさせよう(解像度は固定) - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編 " http://jsdo.it/phi/98ui
// forked from phi's "canvas のサイズを画面いっぱいにしてみよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/vQH9
// forked from phi's "幅, 高さを指定しよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/oTuT
// forked from phi's "高さを指定しよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/7Ta5
// forked from phi's "幅を指定しよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/qmG9
// forked from phi's "背景色を指定しよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/3FTM
// forked from phi's "Canvas インスタンスを生成しよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/daoa
// forked from phi's "tmlib.js 0.1.3 template" http://jsdo.it/phi/w6VG

/*
 * 定数
 */
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;

/*
 * メイン
 */
tm.main(function() {
    // canvas インスタンス生成
    var canvas = tm.graphics.Canvas("#world");
    
    // 幅, 高さを指定
    canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
    // 画面にフィットさせる
    canvas.fitWindow();
    
    // 円を描画
    canvas.fillStyle = "rgb(255, 0, 0)";
    canvas.fillCircle(230, 150, 100);
    
    // グローバルαを指定
    canvas.globalCompositeOperation = "destination-in";
    
    // 円を描画
    canvas.fillStyle = "rgb(0, 255, 0)";
    canvas.fillCircle(180, 250, 100);
    canvas.fillStyle = "rgb(0, 0, 255)";
    canvas.fillCircle(280, 250, 100);
    
    // 補助線
    canvas.globalCompositeOperation = "source-over";
    canvas.strokeStyle = "#aaa";
    canvas.strokeCircle(230, 150, 100);
    canvas.strokeCircle(180, 250, 100);
    canvas.strokeCircle(280, 250, 100);
});

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

# [tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編](http://tmlife.net/?p=8637) [tmlib.js のハッカソンイベント](http://atnd.org/events/34279)をやることになりました!! っということでそれまでにバンバン tmlib.js のエントリーを投稿していこうと思います. 今回はその第一弾! Graphics(HTML5 Canvas) 編です. このサイトでお馴染みの怒濤シリーズ. tmlib.js の Graphics 周りの機能についてのサンプルを作りまくってみました. tmlib.js で定義されている tm.graphics.Canvas クラスは HTML5 Canvas を拡張したものなので HTML5 Canvas の機能は基本的にそのまま使えます. なので HTML5 Canvas の勉強にもなるかと思います. また, それに加え星型や多角形といった複雑な図形を簡単に描画したり, モノクロフィルタやブラーフィルタを掛けて遊んだりってことができます. ゲームへの応用も簡単にできます.(ゲームへの応用は次回やる Application 編で詳しく説明します) ## Links - [tmlib.js GitHub](https://github.com/phi1618/tmlib.js) - [tmlib.js スライド](http://www.rvl.io/phi/tmlibjs) - [tmlib.js hackthon #1](http://atnd.org/events/34279) - [enchant.js 怒涛の 100 tips](http://tmlife.net/programming/javascript/enchant-js-100-tips.html) - [CoffeeScript 入門! 怒濤の 100 サンプル!!](http://tmlife.net/programming/javascript/coffeescript-guide-dotou-100-sample.html)// forked from phi's "canvas を画面にフィットさせよう(解像度は固定) - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編 " http://jsdo.it/phi/98ui // forked from phi's "canvas のサイズを画面いっぱいにしてみよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/vQH9 // forked from phi's "幅, 高さを指定しよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/oTuT // forked from phi's "高さを指定しよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/7Ta5 // forked from phi's "幅を指定しよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/qmG9 // forked from phi's "背景色を指定しよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/3FTM // forked from phi's "Canvas インスタンスを生成しよう - tmlib.js 怒濤の 100 サンプル!! - Graphics(HTML5 Canvas) 編" http://jsdo.it/phi/daoa // forked from phi's "tmlib.js 0.1.3 template" http://jsdo.it/phi/w6VG /* * 定数 */ var SCREEN_WIDTH = 465; var SCREEN_HEIGHT= 465; /* * メイン */ tm.main(function() { // canvas インスタンス生成 var canvas = tm.graphics.Canvas("#world"); // 幅, 高さを指定 canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT); // 画面にフィットさせる canvas.fitWindow(); // 円を描画 canvas.fillStyle = "rgb(255, 0, 0)"; canvas.fillCircle(230, 150, 100); // グローバルαを指定 canvas.globalCompositeOperation = "destination-in"; // 円を描画 canvas.fillStyle = "rgb(0, 255, 0)"; canvas.fillCircle(180, 250, 100); canvas.fillStyle = "rgb(0, 0, 255)"; canvas.fillCircle(280, 250, 100); // 補助線 canvas.globalCompositeOperation = "source-over"; canvas.strokeStyle = "#aaa"; canvas.strokeCircle(230, 150, 100); canvas.strokeCircle(180, 250, 100); canvas.strokeCircle(280, 250, 100); });<canvas id='world'></canvas>body { background-color: #DDDDDD; font: 30px sans-serif; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

phi

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

Blog http://phiary.me

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/kJ6K/js"></script>

QR Code

Discussion

Questions on this code?

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

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

Links

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags