動的コンテンツを征するにはSVGやCanvasの基礎知識から・・

動的コンテンツを征するにはSVGやCanvasの知識が･･

SVGとHTML5 Canvasについて

SVGとHTML5 Canvasの比較

解像度: SVGは解像度に依存せず、Canvasは解像度に依存する。
操作性: SVGはDOMと統合されているため操作が簡単。Canvasは低レベルAPIのため柔軟だが複雑。
用途: SVGは高品質なインタラクティブグラフィックに、Canvasは高パフォーマンスなリアルタイムグラフィックに適している。


JPGやPNG：既存の画像データとして保存される静的な画像ファイル。
SVG：ベクターグラフィックスを描画するためのXMLコード。
Canvas：ビットマップ画像を描画するためのHTML要素とJavaScript API。

比較の詳細はこちらからご覧ください。
↓↓↓↓
SVGとHTML5Canvasの比較その2

svgは要素で動かす。
animate attributeName="
animateTransform attributeName=
回転や移動などの動作するための要素

SVG基本

<svg width="100" height="100">
    <rect width="100" height="100" style="fill:blue"/>
</svg>
 

canvasの基本

        // キャンバスとコンテキストを取得
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        // 四角形を描画
        context.fillStyle = 'blue';
        context.fillRect(50, 50, 100, 100);

        // 線で四角形を描画
        context.strokeStyle = 'red';
        context.lineWidth = 5;
        context.strokeRect(200, 50, 100, 100);

        // 円を描画
        context.beginPath();
        context.arc(150, 250, 50, 0, Math.PI * 2, false);
        context.fillStyle = 'green';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = '#003300';
        context.stroke();

なんとなく基本がみえて来たところで、SVGとCanvasを使用したサンプルを作り、検証してみることとしました。

サンプルその１　SVG版（SVGアニメーション）

プロトタイプ１号（SVG版）

HTMLをベースに
SVGをランダムで呼び出す単純なものです。
図形と文字はSVGを使用しています。
制御（js）は、クリックアクションとランダムのみです。
↓↓↓↓
「　プロトタイプ１号（SVG版）のリンク先へ　」

プロトタイプ2号（SVG版）

プロトタイプ1号にステージを３つ用意し
スタート画面、実行画面、結果画面に出力するようにしました。
↓↓↓↓
「　プロトタイプ2号（SVG版）のリンク先へ　」

プロトタイプ3号（SVG版）完成品

プロトタイプ2号をベースに、SVGを読み込み画像を
入れ、文字を動かしました。
↓↓↓↓
「　プロトタイプ3号（SVG版）のリンク先へ　」

SVGポイント1

<svg xmlns="http://www.w3.org/2000/svg" width="350" height="350">
	<!-- メインイメージ  SVGを外部からリンクする-->
	<image href="omikuji01.svg" width="350" height="350" />
</svg>

SVGポイント2

<svg>
<!-- "カラカラ" 文字 -->
<text x="175" y="175" font-size="30" font-family="Arial" text-anchor="middle" alignment-baseline="middle">
<!-- 各文字に対するtspan要素にする -->
	<tspan id="char1" fill="#fff" x="150">カ</tspanｃ
	<tspan id="char2" fill="#fff" x="175">ラ</tspan>
	<tspan id="char3" fill="#fff" x="200">カ</tspan>
	<tspan id="char4" fill="#fff" x="225">ラ</tspan>
</text>

<!-- 文字のアニメーションにする -->
	<!-- 1文字目のアニメーション -->
	<animate xlink:href="#char1" attributeName="y" from="175" to="145" dur="0.5s" begin="0s" repeatCount="indefinite" fill="freeze" />
	<animate xlink:href="#char1" attributeName="y" from="145" to="175" dur="0.5s" begin="0.5s" repeatCount="indefinite" fill="freeze" />
	
	<!-- 2文字目のアニメーション -->
	<animate xlink:href="#char2" attributeName="y" from="175" to="145" dur="0.5s" begin="0.2s" repeatCount="indefinite" fill="freeze" />
	<animate xlink:href="#char2" attributeName="y" from="145" to="175" dur="0.5s" begin="0.7s" repeatCount="indefinite" fill="freeze" />
	
	<!-- 3文字目のアニメーション -->
	<animate xlink:href="#char3" attributeName="y" from="175" to="145" dur="0.5s" begin="0.4s" repeatCount="indefinite" fill="freeze" />
	<animate xlink:href="#char3" attributeName="y" from="145" to="175" dur="0.5s" begin="0.9s" repeatCount="indefinite" fill="freeze" />
	
	<!-- 4文字目のアニメーション -->
	<animate xlink:href="#char4" attributeName="y" from="175" to="145" dur="0.5s" begin="0.6s" repeatCount="indefinite" fill="freeze" />
	<animate xlink:href="#char4" attributeName="y" from="145" to="175" dur="0.5s" begin="1.1s" repeatCount="indefinite" fill="freeze" />
</svg>

サンプルその２　Canvas版

プロトタイプ１号（Canvas版）

よくある画像変化ゲーム（アハ体験）を簡素ですが
作ってみました。
クリックアクション、フェイドイン、フェイドアウトを使用しています。
↓↓↓↓
「　プロトタイプ１号（Canvas版）のリンク先へ　」

プロトタイプ2号（Canvas版）

プロトタイプ1号をベースにタイマーを設置し
時間で制御するようにしました。
↓↓↓↓
「　プロトタイプ2号（Canvas版）のリンク先へ　」

プロトタイプ3号（Canvas版）完成版

プロトタイプ2号をベースに見た目を整えました。
実際にプレイできるので、クリアできるか試してください。
↓↓↓↓
「　プロトタイプ3号（Canvas版）のリンク先へ　」

ベースはadobe animateで作ってます。

ベースとなるステージ、UI系のボタン類。画像の取り込み。文字の動きなどで使用してます。
JSについては、createjs.comを参考にしています。

Adobe Animateの画面内にいて

ポイント1

ステージづくりが基本。
スタート→プレイ→ゲームクリア→ゲームオーバー
各ステージに画像やスクリプトを組み込みます。

まとめ