HTML5.0のCanvas要素について

質問

サイトにグラフ（降水雨量。１時間単位）を表示したいと思っています。
そのための技術を調べてたところHTML5.0のcanvas要素　と　JavaScriptに行き着きましたが、
HTML5.0のcanvas要素　と　JavaScript　の役割分担が理解できませんでした。

　Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。＊１
　　　　　　　　　　　　（参照　HTML5.JP：http://www.html5.jp/canvas/what.html）
とありますが、HTML5.0を使わずにXHTMLとJavaScriptでグラフを表示してるように見えるサイトがあります。
XHTMLとJavaScriptで実現可能であるなら、canvas要素はなぜ注目しているのだろうと疑問に思いました。
具体的に聞きたいことは

１．HTML5.0 canvas要素を使わずにXHTMとJavaScriptを使い、サイトにグラフは出力できるでしょうか。
２．＊１でのプラグインとはJavaScriptファイル(.js)も含むのでしょうか
３．HTML5.0で記述したサイトでグラフ表示だけはCanvas要素を使わずにJavaScriptライブラリを使い記述するのは非効率なのでしょうか。

分かる部分だけでもお答えして頂けると助かります。
知識が足りずとんちんかんな質問になってるかもしれませんが、
よろしくお願いします。

下記はHTML4.1 と　JavaScriptで出力されたグラフです。
http://highcharts.com/demo/

回答No.4

Chaire · ベストアンサー

「HTML 5.0」なる規格は存在しません。「HTML5」でひとつです。さらに言えば今年冒頭にバージョン番号も廃止されたので、正確には「HTML」または「HTML Standard」ですが、しばらくは「HTML5」も使われます。

---
canvas 要素はもともと Safari が Dashboard Widget 用に作った独自拡張で、Mozilla/Firefox と Opera が追随しました。下記ページは 2005 年に作られた JS 製お絵描きツールですが、ブラウザごとに「SVG Tiny、HTML Canvas、CSS Positioning、VML」を切り替えています。
http://nanto.asablo.jp/blog/2005/09/27/89628

> HTML4.1 と　JavaScriptで出力されたグラフ
なるものも、実際には SVG（IE には VML）で出力されています。上記サイトと同じです。

---
本当に HTML + CSS だけで絵を描く方法は主に 2 種類あります。絶対・相対配置を駆使する「CSS Positioning」と、table 要素をビットマップであるかのように使う「テーブルアート」です。後者はおもしろハックではありますが実用性はないとして、前者について考えてみます。

グラフデータを HTML + CSS で出力するとして、どんなマークアップになるでしょうか？

div.canvas { position: relative }
span.dot { position: absolute; width: 1px; height: 1px; }

<div class="canvas" position="position: relative">
　<span class="dot" style="top: 0px; left: 0px"></span>
　<span class="dot" style="top: 1px; left: 1px"></span>
　<span class="dot" style="top: 2px; left: 2px"></span>
</div>

とりあえずキャンバスの左上から右下に向けて 3 ドット分だけ描いてみました。ですが、ドットの数だけ大量の要素ノードを設けるのは負荷が大きいです。工夫してドット数を減らすことは可能ですが、全体としてかなり重くなります。

何より、空 span の羅列というのは、メディアに依存しない文書構造のマークアップという HTML の役割を逸脱しています（HTML はページレイアウトのための言語ではありませんし、この書き方では非視覚系ブラウザに全く情報を伝えられません）。

---
そういうわけで、少なくとも HTML + CSS（および JS）だけで図を描くというのは、それが遊びにとどまるうちならともかく、「ちゃんと情報を伝える」という点で無理があるわけです。

canvas 要素は JavaScript を知っていれば気軽にビットマップ画像を作成・編集でき、その場で DOM 文書木にセットして反映させることもできます。canvas 要素のメリットは手軽さに尽きますが、それだけに JS 無効時などのアクセシビリティをどう確保するか、未だ議論があります。

IE で canvas 要素をエミュレートしたり、IE で SVG を使うための JavaScript ライブラリは、それなりの数が公開されています。

お礼

多岐に渡る有意義な情報ありがとうございます。
SVG（IE には VML）等一度調べてみます。

回答No.3

神崎 渉瑠（@taloo）

JavaScriptで今までできなかったことができるようになった、という点で、
PerlやPHPなど、ActionScriptやJavaがわからないけど、JavaScriptならわかるという人にも作れるようになった、という点で注目されていると思います。

静的な画像を作るのであれば、HTML要素をレイヤーにして配置すればできますし、
CSS3の、IEのfilterに相当するルールを適用すれば、要素を回転や変形などもできますので、
ご想像通り、あえてcanvasを使う必要はありません。

斜めの線や曲線は、レイヤーではできませんでしたが、今後はCSS3に回転のルールが加わりますので（IEならfilterですでに可能）
折れ線グラフを作るのも、canvasではなくレイヤー（CSS）でできると思います。

CSSでできなくて、Java、ActionScript、canvasのいずれかを使う必要性が出てくるのは、
ゲームなどで爆発や波などのイフェクトをプログラムで作ったり、絵描きくらいではないでしょうか。

プリキュアシリーズ
http://asahi.co.jp/precure/
（下にリンクがある、過去のプリキュアシリーズも参考に）
サイトトップのアイキャッチにFlashを使ったイフェクトがたくさん使われています。

こちらはJavaです。
http://www.anfyteam.com/
画像が波打ったり、モーフィングなどのイフェクトがあります。

こういうイフェクトを作るなら、CSSではなくFlash、Java、canvasが必要になってくると思います。

、、、イフェクトがうっとうしいかもしれませんが、それはそれ。

お礼

>折れ線グラフを作るのも、canvasではなくレイヤー（CSS）でできると思います。
貴重な情報ありがとうございます。
自分で調べて検討してみます。

回答No.2

ORUKA1951

現在のXHTMLは基本的にはHTML4.01と同じものですから、XHTLと指定する必要はないでしょう。
　HTML4.01Transitional → XHTML1.0Transitional → ×
　HTML4.01strict → XHTML1.1strict → XHTML1.1
→といっても≒ 文法が違うだけ

　グラフといっても様々です。棒グラフもあれば折れ線グラフもある。
　単純なグラフの場合、SVGを使うほうが効率的な場合もあります。

　canvasは、javascript(HTML5ではデフォルトになった)で、canvas要素内にhavascriptを記述することで図形を書けるようにしたものです。

　いずれも現状では、試験的用途にとどめるべきで、実用性から言うとimageMagickを使ってサーバーサイドでGIFなりjpegなり、PNGで画像を作成させるほうがよいでしょう。perlから使えるPerlMagickも大抵のサーバーにはインストールされていますから、それを使うほうが効果的です。
　imageMagickをつかったカウンターの例が下記にあります。現在、配布はされていないようでCGI自体は入手できませんが、色々なことができそうです。
Lacoocan用アクセスカウンター(LaCounter.cgi)：マニュアル ( http://iruka.la.coocan.jp/cgi/counter/LaCounter.html )

　あらかじめデータだけアップロードしておけば、時系列と降水量のCSVデーターを参照して、簡単なコマンドで任意の画像を得られますから、とても便利です。
　棒状の画像を一方のサイズだけ変化させて連結させれば棒グラフはすぐできます。

お礼

>　いずれも現状では、試験的用途にとどめるべきで、実用性から言うとimageMagickを使ってサーバーサイドでGIFなりjpegなり、PNGで画像を作成させるほうがよいでしょう。
HTML5はまだ草案であると言う事で、以前から懸念しておりました。
やはり、まだ様子を見ておくべきなのかもしれません。
代用技術も教えていただきありがとうございました。

回答No.1

SAYKA

サイトを確認してないけれど　4でのグラフは 同じ場所に重ねて表示できるという方法を利用して、決行「無理矢理」それっぽく見せてるんだけれど
canvasは1つの要素内で簡潔するからそこが違うかな。

4だと棒グラフやなんやらは素材を用意しないとならないけれど5は描画させるので画像素材は要らない。
勿論、模様だとか写真を貼付けたいとか言い始めたらその限りじゃないけど。

お礼

>同じ場所に重ねて表示できる
>4だと棒グラフやなんやらは素材を用意しないとならないけれど5は描画させるので画像素材は要らない。

この2点は貴重な情報でした。ありがとうございます。