tmlib.js 100 サンプル!! 解説一覧

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

100サンプルを解説してみました。

基礎

その1 Canvas インスタンスを生成しよう
その2 背景色を指定しよう
その3 幅を指定しよう
その4 高さを指定しよう
その5 幅、高さを指定しよう
その6 canvasのサイズを画面いっぱいにしよう
その7 canvasを画面にフィットさせよう(解像度は固定)

図形-初級(Figure)

その8 直線を描画しよう
その9 矩形を描画しよう(塗りつぶし描画)
その10 矩形を描画しよう(ストローク描画)
その11 円を描画しよう(塗りつぶし描画)
その12 円を描画しよう(ストローク描画)
その13 円弧を描画しよう(塗りつぶし描画)
その14 円弧を描画しよう(ストローク描画)
その15 三角形を描画しよう(塗りつぶし描画)
その16 三角形を描画しよう(ストローク描画)
その17 点を描画しよう
その18 矩形範囲をクリアしよう
その19 クリッピングしてみよう

図形-中級(Figure)

その20 多角形を描画しよう(塗りつぶし描画)
その21 多角形を描画しよう(ストローク描画)
その22 星型多角形を描画しよう(塗りつぶし描画)
その23 星型多角形を描画しよう(ストローク描画)
その24 点線を描画しよう
その25 矢印を描画しよう
その26 ラインズを描画しよう(塗りつぶし描画)
その27 ラインズを描画しよう(ストローク描画)
その28 角丸四角形を描画しよう(塗りつぶし描画)
その29 角丸四角形を描画しよう(ストローク描画)

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

その30 塗りつぶしスタイルを指定してしよう
その31 ストロークスタイルを指定してみよう
その32 線形グラデーションを指定してみよう
その33 円形グラデーションを指定してみよう
その34 塗りつぶしスタイルに画像を指定してみよう
その35 状態をスタック、復帰させてみよう
その36 塗りつぶしスタイルとストロークスタイルを一括で指定しよう

イメージ

その37 drawImage(image, dx, dy)
その38 drawImage(image, dx, dy, dw, dh)
その39 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

テキスト(Text)

その40 テキストを描画しよう(塗りつぶし描画)
その41 テキストを描画しよう(ストローク描画)
その42 フォントを指定しよう
その43 最大幅を指定してテキストを描画しよう
その44 テキストの横揃えを指定しよう
その45 テキストの縦揃えを指定しよう
その46 テキストのスタイルを一括で指定しよう

透明度・合成

その47 透明度を設定しよう
その48 合成タイプを設定しよう(source-atop)
その49 合成タイプを設定しよう(source-in)
その50 合成タイプを設定しよう(source-out)
その51 合成タイプを設定しよう(source-over)
その52 合成タイプを設定しよう(destination-atop)
その53 合成タイプを設定しよう(destination-in)
その54 合成タイプを設定しよう(destination-out)
その55 合成タイプを設定しよう(destination-over)
その56 合成タイプを設定しよう(lighter)
その57 合成タイプを設定しよう(copy)
その58 合成タイプを設定しよう(xor)

ラインスタイル(Line Style)

その59 ラインの幅を設定してみよう
その60 ラインキャップスタイルを設定更してみよう
その61 ラインの接続部分のスタイルを設定してみよう
その62 ラインのマイター限界比率を設定してみよう
その63 ラインスタイルを一括で指定しよう

影(shadow)

その64 ぼかし効果のサイズを指定しよう
その65 影の色を指定しよう
その66 影のオフセット X 値を指定しよう
その67 影のオフセット Y 値を指定しよう
その68 影のオフセット XY 値を指定しよう
その69 影のスタイルを一括で指定しよう

変形

その70 translate を使って移動変形させよう
その71 rotate を使って回転変形させよう
その72 scale を使って拡縮変形させよう
その73 画面の中心に移動変形させよう
その74 変形した変換マトリックスをリセットしよう

ピクセル操作

その75 ピクセルを取得しよう
その76 ピクセルを設定しよう
その77 砂嵐(白黒)を作ってみよう
その78 砂嵐(カラー)を作ってみよう
その79 モノクロフィルダーを適応させてみよう
その80 レッドフィルターを適応させてみよう
その81 グリーンフィルターを適応させてみよう
その82 ブルーフィルターを適応させてみよう
その83  リバースフィルターを適応させてみよう
その84 トゥーンフィルターを適応させてみよう
その85 ブラーフィルターを適応させてみよう

図形(上級)

その86 たくさん図形を描画してみよう(四角形)
その87 たくさん図形を描画してみよう(円)
その88 たくさん図形を描画してみよう(多角形)
その89 たくさん図形を描画してみよう(星)
その90 魔法陣を描画してみよう
その91 クマを描画してみよう
その92 描画した図形を動かしてみよう
その93 描画した図形をバウンドさせてみよう
その94 パックマンを描画しよう

その他

その95 簡単なペイントツールを作ってみよう
その96 描画されている内容をDataURL Scheme に変換してみよう
その97 DataURL Scheme に変換した描画情報を画像として保存しよう(png)
その98 DataURL Scheme に変換した描画情報を画像として保存しよう(svg)
その99 DataURL Scheme に変換した描画情報を画像として保存しよう(jpg)


tmlib.js 100 サンプル!! 解説一覧」への1件のフィードバック

  1. ピンバック: tmlib.js ゲームプログラミングチュートリアル – 今流行のフラットデザインを使ったタッチゲームを作ろう | TM Life

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です