prog*sig

SVGとCanvasについて。
SVGはJavaScriptとは独立している。
Canvasの起源はAppleから生まれたもの。

■15.1  Creating Basic Shapes in Canvas (Using the canvas Element)

CnavasをJavaScriptから扱う時はまず最初にCanvasのコンテキスト取得する。
fillRect
長方形をfillstyleの値で塗りつぶし
strokeRect
長方形のアウトラインをstrokeStyleの値で描く
clearRect
長方形の範囲をクリア

2010-09-12 1st - jsdo.it - share JavaScript, HTML5 and CSS

■15.2 Implementing Canvas Applications in IE

excanvas.js
VML
SVGを使ってIEにもSVGを表示

■15.3 Creating a Dynamic Line Chart in Canvas

Canvasで折れ線グラフ書くよ
lineTo使ってAからB地点へ線を結んでいくだけ。

2010-09-12 2nd - jsdo.it - share JavaScript, HTML5 and CSS

■15.4 Adding JavaScript to an SVG File

SVGファイルを埋め込んで表示する。(でも通常のsvgとは違う気がするので、他のをそのままとかはできない)
SVGはXMLなので、XHTMLに埋め込む場合はmetaにapplication/xhtml+xmlがいる。

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

下記のように別途.svgのファイルを作りobjectタグで読み込むこともできる。
この場合、svgの読み込みをしてからJavaScriptでいじる必要があるため、通常のDOMと同じようにobject.onloadイベントで処理をさせる。

<object id="object" data="rect.svg" style="padding: 20px; width: 600px; height: 600px">

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
  <script type="text/ecmascript">
    <![CDATA[

      // set element onclick event handler
      window.onload=function () {

         var square = document.getElementById("square");

         // onclick event handler, change circle radius
         square.onclick = function() {
            var color = this.getAttribute("fill");
            if (color == "#ff0000") {
               this.setAttribute("fill", "#0000ff");
            } else {
               this.setAttribute("fill","#ff0000");
           }
        }
     }
    ]]>
  </script>
  <rect id="square" width="400" height="400" fill="#ff0000" x="10" y="10" />
</svg>

■15.6 Emulating SVG in Internet Explorer

IEでSVGをエミュレート。
SVGWeb - Flashを使ってSVGを表示

• svgweb - Project Hosting on Google Code

IE9はSVGに対応する。

■15.7 Enable Interactive SVG Embedded in HTML

XHTMLではなくHTMLページにSVGを埋め込むには
HTML5を使うか、SVGWebを使ってsvgをラップする方法がある。

<script type="image/svg+xml">
   <svg...>
      ...
   </svg>
</script>

HTML5でもインラインにSVGを埋め込む事ができるようになったブラウザが増えているが、
HTML5でSVGを使う時には名前空間の問題が存在する。
HTMLには名前空間が存在しないので、getElement*NSなどが使えない。

var  dc = document.getElementsByTagNameNS("http://purl.org/dc/elements/1.1/","title");
// =>
var  dc = document.getElementsByTagName("dc:title");

また、prefixやloalNameの扱いもXHTMLとHTML5では違う。同じ値をとりたいならtextContentなどを使う。

• Firefox 4 の HTML5 パーサ – インライン SVG、スピード、などなど « Mozilla Developer Street (modest)
• スタートアップ SVG：第1回　SVGの基礎知識｜gihyo.jp … 技術評論社
• HTML5 + CSS3 雑感 - KBDAHOLIC - やぬすさんとこ

SVGWebはその辺の互換性はあって、IEでもaddEventListenerが使えるなどつかいやすくしてるそうだ。

■15.9  Integrating SVG and the Canvas Element in HTML

SVGの中にCanvasを入れるにはforeignObjectというものを使う。
この要素内には XHTML,MathML, RDF, or any other XML-based syntaxを埋め込める。

 <svg id="svgelem"
     height="400" xmlns="http://www.w3.org/2000/svg"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
     <title>SVG Circle with metadata</title>
        <script type="text/javascript">
          <![CDATA[
          window.onload = function () {
             var context2 = document.getElementById("thisCanvas").getContext('2d');
             context2.fillStyle = "#ff0000";
             context2.fillRect(0,0,200,200);
          };
          ]]>
        </script>
        <foreignObject width="300" height="150">
           <xhtml:canvas width="300" height="150" id="thisCanvas">
            alternate content for browsers that do not support Canvas
           </xhtml:canvas>
        </foreignObject>
        <circle id="redcircle" cx="300" cy="100" r="100" fill="red" stroke="#000" />
  </svg>

■15.11  Running a Routine When an Audio File Begins Playing

HTMl5 audioについて。
• Firefox (3.5 and up) only supports WAV and Ogg Vorbis
• Opera (10.5) only supports WAV (at this time)
• Chrome supports MP3 and Ogg Vorbis
• Safari supports MP3 and WAV

■15.12  Controlling Video from JavaScript with the video Element

HTML5 Videoについて
play,pause,load,canPlayTypeなどのメソッドから操作できる。

なんというか課題山積みな章って感じ