CANVASについて

質問

お陰様で過去２回の質問でHTML5の目標が見えてきました。
今回お聞きしたいのはcanvasでどの程度できるかです。

下記にフラッシュと思われる2Dのゲームを２つほど掲載しました。
一応、この程度の動的コンテンツです。

これらはcanvasだけでも十分なのでしょうか。
それともSVGの力を借りないと無理でしょうか。

http://www.afsgames.com/reversi.htm
http://3rd.geocities.jp/shogi_fireworks/flaban/

回答No.1

ORUKA1951 · ベストアンサー

JavaScript囲碁サンプル | 無職のHTML5 Canvas ( http://mimami24i.appspot.com/html5/jsigo1 )
HTML5とCanvasで作られたゲーム厳選18選 | Web活メモ帳 ( http://blog.verygoodtown.com/2010/09/html5-canvas-game-18/ )
とか・・・

canvas game - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&sclient=psy-ab&q=canvas+game&oq=canvas+game&aq=f&aqi=g1g-r2g-m1g-mr1&aql=&gs_nf=1&gs_l=hp.3..0j0i4l2j0i5j0i5i4.1101934.1106191.3.1107205.13.13.4.0.0.0.268.1594.0j7j2.9.0.o7w6tZvd8DU&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=8d35ca2be77ddbd5 )
で検索すると色々面白いものが・・

詳しくは
canvas flash 比較 - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&sclient=psy-ab&q=canvas+flash+%E6%AF%94%E8%BC%83&oq=canvas+flash+%E6%AF%94%E8%BC%83&aq=f&aqi=&aql=&gs_nf=1&gs_l=hp.3...100573.110414.4.111014.14.13.4.0.0.0.549.1812.0j8j5-1.9.0.rlstraQlyCQ&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=8d35ca2be77ddbd5 )
などで、canvasは、まだまだ進化途上でどの程度のものになるか不明な部分もありますが、現状では、歴史と技術の蓄積があるflashのほうが一歩リードしている。

　私的には、canvasはflashと対比するべきではなく、cnvasで可能なものはcanvasで行うべき程度です。
　こちらを読んでおくと良いかも
★O'Reilly Japan - JavaScriptグラフィックス ( http://www.oreilly.co.jp/books/9784873115283/ )

お礼

たびたびお世話になります。
思わずIEで開いていたら見事にゲームが動きませんでした＾＾；
この程度のことができれば我々のコンテンツでは十分です。
あまりリッチすぎても騒々しいだけなので。

CANVASよりもFlashがリードしているのは分かります。
前回他の方の回答でもあったようにFlashがいつ切られるのか。
そういう事情もあってCANVASを本流とみなしているわけです。
アドビがあまり積極的でないという記事もみかけました。

flashCanvasとかあるんですね。何のことかと思いました。
統一性のないのもCanvasの弱点になりそうですね。
Flashが逆転するとしたらその辺りをつくことでしょうか。
この度は有益な情報をどうも有り難うございます。

回答No.2

神崎 渉瑠（@taloo）

<div>や<img>でも出来ますし、<canvas>でも出来ますし、<svg>でも出来ます。

<div>の弱点は、動的に斜線や曲線を引くことが出来ないことに有ります。
あらかじめサイズが決まっていれば<img>で作ることが出来ますが、
「その場で斜線の太さや長さ、角度を決める」ということができませんので、そういう作業が多いグラフ描画などはCANVASやSVGが使われます。

動的に<img>を作り出すものが<canvas>です。
img.src="make_graph.cgi?"+parameter;
などと、CGIでグラフを作り<img>に描画する方法が使われていましたが、
サーバーの負荷が高いですし、ゲームのような即時性が必要なものでは使えません。

SVGが使われない理由は、単にブラウザがサポートしていないからです。
（または、サポート状態が悪くて使い物にならないからです。）

-----------
いろいろなブラウザの独自実装を一つにまとめようと言うのがHTML5です。
他のブラウザの独自実装を取り込もうというようなものですので、全てのブラウザが全ての機能をサポートできるようになるには、相当な時間がかかります。

IEでcanvasを使うためにはIE9が必要ですが、WindowsXPではIE9は動きません。
SafariでAjaxを使うためには、Safari1.2以上が必要ですが、Safari1.2はMacOS X 10.3が必要です。

MacOS X 10.2、Safari1.2は「古いブラウザ」「古いブラウザ」として考慮する必要は有りませんが、
WindowsXP、IE8はまだまだ現役ですから、これらのOS、ブラウザ（のバージョン）が「古い」「全く使われなくなった」と言われるまでは、完全移行は待ってもいいかもしれません。

ただし、提示されているようなゲームなど、
Webアプリケーションのジャンルでは、互換性を考慮する必要がないと思います。
（この場合の『Webアプリケーション』の対義は『HTMLドキュメント』）

ネイティブアプリでは、WindowsアプリとMacアプリ、iPhoneアプリ、DoCoMoアプリ、、、等々、特定の環境のみ動くアプリケーションが多いです。
同様にWebアプリにおいても、Chromeアプリ、IEアプリ、Operaアプリ、、、等々、特定の環境のみ動くものであっても、私は問題ないと思います。

もちろん、「より多くの人に使ってもらいたい」というのであれば、それぞれの環境に移植する方がいいとは思いますけどね。
とくにブラウザ間は比較的移植しやすいですから。

お礼

ご回答有り難うございます。
当方でも処理は端末側でということでCGIは見送りになりました。

canvasの基礎的な仕様は固まっているようですね？
多分、現在の仕様だけでいけるのではないかと楽観しております。

特定の環境というのであれば、やはりIEです。
業務命令みたいなものなので、これは避けられません。

補足

肝心なことを忘れていました。
SVGはほとんど関与していないというか、
未だに実装しているブラウザも少ないんですね？

これでCANVAS一本に絞り込めるわけですが、
ベクタ画像を扱うときにはまた考えてみます。