プログラミング HTML5 Canvas
――ウェブ・モバイル・ゲーム開発者のためのアプリケーション開発ガイド

[cover photo]
  • 2014年07月 発行
  • 624ページ
  • ISBN978-4-87311-687-7
  • フォーマット Print PDF
  • 原書: Core HTML5 Canvas

オライリー・ジャパンで書籍を購入:
定価4,104円

Ebook Storeで電子版を購入:
価格3,283円

本書は、HTML5 Canvasを詳しく解説しながら、ゲームやアニメーションなどの開発に必須の項目を取り上げて実践的な知識とテクニックを提供する解説書です。アニメーションのタイミング仕様など、Canvasに関連するHTML5の側面に深く踏み込み、デスクトップのブラウザとモバイルデバイスで実行できるアプリケーションを実装していきます。はじめにCanvas APIの基本とシェイプやテキストをキャンバスに描画する方法、イメージを描画し操作する方法などを解説し、続いてAPIを使ってアニメーションやアニメーションスプライトを実装する方法、物理シミュレーションや衝突判定、ビデオゲームの開発方法などを探っていきます。そしてプログレスバーやスライダー、イメージパンナーといったカスタムコントロールの実装方法を学び、Canvasベースのモバイルアプリケーションを作成する方法を見ていきます。ウェブ、モバイル、ゲームなどの開発者におすすめするHTML5 Canvasの決定版解説書です。本書のサンプルコードは本書(原書)のコンパニオンWebサイトとGitHubで公開されています。コンパニオンWebサイトでは、オンラインでサンプルコードを実行することもできます。詳しくは「関連ファイル」のタブをご覧ください。

関連書籍

HTML5 Canvas
HTML5 Canvasデスクトップリファレンス
JavaScriptグラフィックス
入門 モダンJavaScript
入門 Webゲーム開発

はじめに

1章 基礎
    1.1 canvas要素
        1.1.1 canvas要素のサイズと描画サーフェイスのサイズ
        1.1.2 Canvas API
    1.2 Canvasコンテキスト
        1.2.1 2dコンテキスト
        1.2.2 キャンバス状態の保存と復元
    1.3 本書で標準とするサンプル
    1.4 スタート
        1.4.1 仕様
        1.4.2 ブラウザ
        1.4.3 コンソールとデバッガ
        1.4.4 パフォーマン
    1.5 基本的な描画操作
    1.6 イベント処理
        1.6.1 マウスイベント
        1.6.2 キーボードイベント
        1.6.3 タッチイベント
    1.7 描画サーフェイスの保存と復元
    1.8 キャンバスでのHTML要素の使用
        1.8.1 目に見えないHTML要素
    1.9 キャンバスの印刷
    1.10 オフスクリーンキャンバス
    1.11 数学の速習
        1.11.1 代数方程式を解く
        1.11.2 三角関数
        1.11.3 ベクトル
        1.11.4 計測単位を利用して方程式を導き出す
    1.12 まとめ

2章 描画
    2.1 座標システム
    2.2 描画モデル
    2.3 矩形の描画
    2.4 カラーと透明度
    2.5 グラデーションとパターン
        2.5.1 グラデーション
        2.5.2 パターン
    2.6 シャドウ
        2.6.1 内側シャドウ
    2.7 パスとストローク、塗り
        2.7.1 パスとサブパス
        2.7.2 カットアウト
    2.8 線
        2.8.1 線とピクセル境界
        2.8.2 グリッドの描画
        2.8.3 軸の描画
        2.8.4 ラバーバンドを使った線の描画
        2.8.5 破線の描画
        2.8.6 CanvasRenderingContext2Dの拡張による破線の描画
        2.8.7 ラインキャップと接合
    2.9 円弧と円
        2.9.1 arc()メソッド
        2.9.2 ラバーバンドを使った円の描画
        2.9.3 arcTo()メソッド
        2.9.4 ダイヤルゲージ
    2.10 ベジェ曲線
        2.10.1 2次曲線
        2.10.2 3次曲線
    2.11 多角形
        2.11.1 Polygonオブジェクト
    2.12 高度なパス操作
        2.12.1 多角形のドラッグ
        2.12.2 ベジェ曲線の編集
        2.12.3 パスのビューへのスクロール
    2.13 変換
        2.13.1 移動と拡大縮小、回転
        2.13.2 カスタム変換
    2.14 合成
        2.14.1 合成に関する物議
    2.15 クリッピング領域
        2.15.1 クリッピング領域を使った消去
        2.15.2 クリッピング領域を使ったテレスコーピング
    2.16 まとめ

3章 テキスト
    3.1 テキストのストロークと塗り
    3.2 fontプロパティの設定
    3.3 テキストの配置
        3.3.1 水平方向と垂直方向の配置
        3.3.2 テキストのセンター揃え
        3.3.3 テキストの計測
        3.3.4 軸のラベル付け
        3.3.5 ダイヤルのラベル付け
        3.3.6 円弧に沿ったテキストの描画
    3.4 テキスト制御の実装
        3.4.1 テキストカーソル
        3.4.2 キャンバスでのテキスト行の編集
        3.4.3 段落
    3.5 まとめ

4章 イメージとビデオ
    4.1 イメージの描画
        4.1.1 イメージのキャンバスへの描画
        4.1.2 drawImage()メソッド
    4.2 イメージの拡大縮小
        4.2.1 キャンバス境界外でのイメージの描画
    4.3 キャンバスのキャンバスへの描画
    4.4 オフスクリーンキャンバス
    4.5 イメージ操作
        4.5.1 イメージデータへのアクセス
        4.5.2 イメージデータの変更
    4.6 イメージのクリッピング
    4.7 イメージのアニメーション
        4.7.1 オフスクリーンキャンバスを使ったアニメーション
    4.8 セキュリティ
    4.9 パフォーマンス
        4.9.1 drawImage(HTMLImage)とdrawImage(HTMLCanvas)とputImageData()
        4.9.2 キャンバスへのキャンバスの描画とイメージの描画、拡大縮小する場合としない場合
        4.9.3 イメージデータのループ処理
    4.10 虫めがね
        4.10.1 オフスクリーンキャンバスの使用
        4.10.2 ファイルシステムからのイメージのドロップを受け取る
    4.11 ビデオの処理
        4.11.1 ビデオ形式
        4.11.2 ビデオのキャンバスでの再生
        4.11.3 ビデオ処理
    4.12 まとめ

5章 アニメーション
    5.1 アニメーションループ
        5.1.1 requestAnimationFrame()メソッド:フレームレートはブラウザに設定させる
        5.1.2 Internet Explorer
        5.1.3 ポータブルなアニメーションループ
    5.2 フレームレートの算出
    5.3 別のフレームレートで作業を予定化する
    5.4 背景の復元
        5.4.1 クリッピング
        5.4.2 ブリット
    5.5 ダブルバッファリング
    5.6 時間ベースのモーション
    5.7 背景のスクロール
    5.8 視差
    5.9 ユーザージェスチャ
    5.10 時限的なアニメーション
        5.10.1 ストップウォッチ
        5.10.2 アニメーションタイマー
    5.11 アニメーションのベストプラクティス
    5.12 まとめ

6章 スプライト
    6.1 スプライトの概要
    6.2 ペインター
        6.2.1 ストロークと塗りペインター
        6.2.2 イメージペインター
        6.2.3 スプライトシートペインター
    6.3 スプライトのビヘイビア
        6.3.1 ビヘイビアを組み合わせる
        6.3.2 時限的なビヘイビア
    6.4 スプライトアニメータ
    6.5 スプライトベースのアニメーションループ
    6.6 まとめ

7章 物理演算
    7.1 重力
        7.1.1 落下
        7.1.2 弾の軌道
        7.1.3 振り子
    7.2 時間のワープ
    7.3 タイムワープ関数
    7.4 モーションのワープ
        7.4.1 リニアモーション:加速しない
        7.4.2 イーズイン:徐々に加速
        7.4.3 イーズアウト:徐々に減速
        7.4.4 イーズインしてイーズアウト
        7.4.5 弾性と跳ね返り
    7.5 アニメーションのワープ
    7.6 まとめ

8章 衝突判定
    8.1 境界領域
        8.1.1 矩形の境界領域
        8.1.2 円形の境界領域
    8.2 壁からの跳ね返り
    8.3 レイキャスティング
        8.3.1 微調整
    8.4 分割軸原理(SAT)と最小並進ベクトル(MTV)
        8.4.1 SATによる衝突判定
        8.4.2 最小並進ベクトルを使った衝突へのリアクション
    8.5 まとめ

9章 ゲーム開発
    9.1 ゲームエンジン
        9.1.1 ゲームループ
        9.1.2 イメージのロード
        9.1.3 マルチトラックサウンド
        9.1.4 キーボードのイベント
        9.1.5 ハイスコア
        9.1.6 ゲームエンジンの全コード
    9.2 アンゲーム
        9.2.1 アンゲームの HTML
        9.2.2 アンゲームのゲームループ
        9.2.3 アンゲームのロード
        9.2.4 一時停止
        9.2.5 キーリスナー
        9.2.6 ゲームオーバーとハイスコア
    9.3 ピンボールゲーム
        9.3.1 ゲームループ
        9.3.2 ボール
        9.3.3 重力と摩擦
        9.3.4 フリッパーの動き
        9.3.5 キーボードのイベントの処理
        9.3.6 衝突判定
    9.4 まとめ

10章 カスタムコントロール
    10.1 角丸矩形
    10.2 プログレスバー
    10.3 スライダー
    10.4 イメージパンナー
    10.5 まとめ

11章 モバイル
    11.1モバイルのビューポート
        11.1.1 viewportメタタグ
    11.2 メディアクエリ
        11.2.1 メディアクエリとCSS
        11.2.2 JavaScriptを使ったメディア変更へのリアクション
    11.3 タッチイベント
        11.3.1 タッチイベントオブジェクト
        11.3.2 タッチリスト
        11.3.3 タッチオブジェクト
        11.3.4 タッチイベントとマウスイベントのサポート
        11.3.5 ピンチ&ズーム
    11.4 iOS
        11.4.1 アプリケーションアイコンとスタートアップイメージ
        11.4.2 iOSアプリケーションアイコンとスタートアップイメージ向けのメディアクエリ
        11.4.3 ブラウザのクロムのないフルスクリーン表示
        11.4.4 アプリケーションのステータスバー
    11.5 仮想キーボード
        11.5.1 Canvasベースのキーボードの実装
    11.6 まとめ

索引

Feedback

皆さんのご意見をお聞かせください。ご購入いただいた書籍やオライリー・ジャパンへのご感想やご意見、ご提案などをお聞かせください。より良い書籍づくりやサービス改良のための参考にさせていただきます。
[feedbackページへ]