BlogにGoogle Analiticsのリンク埋め込み忘れてた今日この頃(^^;) HTML版はトピックでDiaryとLabsをカテゴリー分けしたり、ちょくちょく修正してます。 で、これを機にHTML5 + CSS3でコーディングし始めました。

当然ながら、FireFox(Mozila）3.5以上かWebKit対応ブラウザが必要です。 ※腐った牛乳？のIE6等はダメですw

まず手始めに。 ■メニューのCSS3 このBlogのメニューをCSS3使って表現。 てか、公開できるようなソースじゃないけど、特質すべき基本事項

 background: -moz-linear-gradient(top, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7));
 background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .7)), to(rgba(255, 255, 255, .7))); 　

のように、「-moz」「-webkit」とブラウザによって対応してやらないといけない。 うーーん、WebKitに統一して欲しいなぁ。

■HTML5 + JavaScriptペイント ライブラリ使わずに、超簡易ですがサンプル作成してみました。

Demo

基本はECMAScript準拠だから、ActionScriptと結構似てます。 ただ、クラス継承とかファイル分類がかなり壁で、リファクタリングがムズイよ！

まず、Canvas2Dの作成 ・HTML

・JavaScript

    function DrawCanvas(view) {
        canvas = document.getElementById(view);
        context = canvas.getContext('2d');
        //context.fillRect(x, y, width, height);
        context.fillStyle = defaultCanvasColor;
        context.strokeStyle = defaultLineColor;
        context.lineWidth = defaultLineWidth;
        return canvas;
    }

この関数の構造、コーディングは将来的にないけど、リファクタリングは後回し。 超基本的部分から。 (1) 従来通り、HTMLからエレメントを取得する canvas = document.getElementById(view);

(2) Canvas2Dのコンテキストを取得する context = canvas.getContext('2d');

ここで、getContext()については、Canvas API にアクセスできるオブジェクトを返すようです。

それなら、HTML5のエレメントで「canvas2d」として、

 canvas2d = document.getElementById(view);
 canvas2d.fillStyle = defaultCanvasColor;

の方がコーディング少なくてわかりやすい？と思った。

が、更に追ってくとCanvas Elementの仕様と実装について記載。

<

pre class="language-javascript">

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(in optional DOMString type, in any... args);

  object getContext(in DOMString contextId);
};

var guiTool = {
    lineWidth: function(value) {
        context.lineWidth = value;
    },
    strokeStyle: function(value) {
        context.strokeStyle = value;
    }
};