HTML5のCanvasはFlashの変わりのダイナミックな処理のイメージがありますが、
テキストをリッチに表示したりするなどの細かな使い方もできたりします。

CanvasTextというJavaScriptライブラリを使うと、
HTMLとCSSを使った構文でインパクトのある文字を魅せる事が出来るようになります。

使い方

//インスタンスを作成
var CanvasText = new CanvasText;

//共通の処理を記述
CanvasText.config({
    canvasId: "canvas",
    fontFamily: "Verdana",
    fontSize: "14px",
    fontWeight: "normal",
    fontColor: "#000",
    lineHeight: "12"
});

//blueクラスを作成して、属性を指定
CanvasText.defineClass("blue",{
    fontSize: "24px",
    fontColor: "#29a1f1",
    fontFamily: "Impact",
    fontWeight: "normal"
});

//pinkクラスを作成して、属性を指定
CanvasText.defineClass("pink",{
    fontSize: "24px",
    fontColor: "#ff5e99",
    fontFamily: "Times new roman",
    fontWeight: "bold"
});

//Canvasに描画するテキストを指定。ここでblueクラスとpinkクラスを使用します。
var text = 'I like <class="blue">blue</class> color but I also like <class="pink">pink</class> color!';
text += '<br />Nevermind, I prefer <class="blue">blue</class> to <class="pink">pink</class>... !'; 

//ここで描画します。
CanvasText.drawText({
    text:text,
    x: 20,
    y: 30
});

Google Chartsを拡張してグラフ作成できるJavaScript「Yokul」

Google ChartsはURLにパラメータを指定するだけでグラフを描いてくれるAPIなのですが
グラフのy座標、x座標の値を細かく指定できなかったりするなど微妙に不便な所があります。

その微妙に不便な所を解消できるかも、なライブラリですよ。

Googleができる事よりも多くのグラフを描画できるのと、10,000 × 10000 pxなどの大きなグラフ生成できるのが特徴です。

↑Y座標のラベルを細かくした様子です。

現在の所はGoogle Chartsの全てのグラフには対応してないようなので、
一部グラフが表示できない場合もあるようですね。

詳細&ダウンロードは下のリンクからどうぞ。

わずか8KBで直感的にCanvasを使えるjQueryプラグイン「jCanvas」が良さそうだったのでご紹介。

円を書く

↑drawArcメソッドで円を書く事ができます。
オプション引数で座標位置とサイズ、色などを指定します。

$("canvas.test").drawArc({
  fillStyle: "black",
  x: 100, y: 100
});

短形を書いて回転させる

↑rotateCanvasで回転軸の座業と角度を指定します。

$("canvas.test").rotateCanvas({
  angle: 45,
  x: 100, y: 100
})
.drawRect({
  fillStyle: "#000",
  x: 100, y: 100,
  width: 100, height: 50
})
.restoreCanvas();

グラデーションを作成する

↑gradientメソッドでグラーデーションオブジェクトを作成し、
描画する際に指定するとグラデーションが適用されます。

var linear = $("canvas.test").gradient({
  x1: 0, y1: 0,
  x2: 0, y2: 100,
  c1: "#729fcf", s1: 0.33,
  c2: "#3465a4", s2: 0.67
});
$("canvas.test").drawArc({
  fillStyle: linear,
  x: 50, y: 50,
  radius: 30
})

パターン画像で埋める

↑画像を指定して、背景にリピート表示させています。

var patt = $("canvas.test").pattern({
  source: "images/pattern.jpg",
  repeat: "repeat"
})
$("canvas.test").drawEllipse({
  fillStyle: patt,
  x: 200, y: 100,
  width: 300, height: 100
})

直線を書く

↑直線を書く際には座標、線幅、色などを指定できます。

$("canvas.test").drawLine({
  strokeStyle: "#000",
  strokeWidth: 10,
  strokeCap: "round",
  strokeJoin: "round",
  x1: 50, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200
})

曲線を書く

↑曲線を書くには、開始点と着地点、通過する位置座標を指定します。

$("canvas.test").drawQuad({
  strokeStyle: "#000",
  x1: 50, y1: 50,
  cx1: 220, cy1: 50,
  x2: 200, y2: 200
})

他にもまだまだ出来る事があります。
使ってみたい方は下のリンクからどうぞ。

Canvasでグラフやインタラクティブなコンテンツを作るのに便利そうだったのでご紹介。

３つのデモがサイトに掲載されているのですが、
グラフの作成、ドラッグ&ドロップ、アニメーションの動きと
それぞれのコードが確認できるようになっています。

スマートフォン用とPCの両方に対応できるようになっていて、
クリックとタッチイベントが発生した際に指定の動作をするには下のように書けば良いようです。

button.bind("click tap", function () {
//ここにコードを記述
} );

コードもシンプルに書けるので良さそうですね。
興味のある方は下のリンクからどうぞ！

これはちょっと使いたいかも。Canvasを手軽に扱えるライブラリです。

iPhone,iPad,Androidで動くように最適化されているので、スマートフォン用のHTMLアプリを作る際に便利ですね。

コードは以下にご紹介。

var interval_1=0;
function startShow()
{
    var r = Math.floor(Math.random() * (254));
    var g = Math.floor(Math.random() * (254));
    var b = Math.floor(Math.random() * (254));
    var x = Math.floor(Math.random() * (439));
    var y = Math.floor(Math.random() * (554));
    fillStyle = "rgba("+r+", "+g+", "+b+", 0.5)";
    jc.circle(x,y,1,fillStyle,1)
        .animate({radius:100,alpha:0},1500,function(){
            this.del();
        });
}

function onload_1()
{
    jc.start(idCanvas,25);
    interval_1=setInterval("startShow()",200);
}

function start_1(idCanvas)
{
    if(interval_1)return;
    onload_1();
}

function stop_1(idCanvas)
{
    clearInterval(interval_1);
    interval_1=0;
    jc.clear(idCanvas);
}

オブジェクト指向が使えるようにもなっているのも嬉しいです。
お手軽でなかなか便利そうですね。詳細＆ダウンロード＆デモは以下からどうぞ。

「PhiloGL」はオープンソースのWebGLフレームワークです。
データの視覚化や3Dゲーム開発に使えそうです。

かなり高機能な作りになっており、非常にレベルの高いデモを見る事ができます。

ちなみにWebGLとは、Canvas上で3D表示ができる技術なのですが
まだSafariやFirefox等の一部ブラウザでしか動作しないのが現状です。

以下にざっとデモをご紹介。

地球温暖化の様子をビジュアル化したデモ

動画からリアルタイムにカラースキームを取得するデモ

3Dのグラフを作成するデモ

Ext JSを作成したSencha Inc.が開発しているようですね。
簡単な作り方の紹介もあるので、興味のある方は触ってみると良さそうです。

本のページをめくるエフェクトを実装したい。
そんな方におすすめなのがCanvasを使用した本のページめくりの実装方法を記載した「Case Study: Page Flip Effect from 20thingsilearned.com」という記事のご紹介。

このHTML5RocksというサイトはGoogleが作成したサイトで、
HTML5に関する文書やチュートリアル、APIの使い方をまとめたサイトです。

記事を書いている方もGoogleの中の人のようで非常に勉強になります。

動作デモ

ページめくりの動作は
ドラッグする事でめくる動作と、クリックでページがふわふわ舞う動きの２パターンがありました。
実際の動作はこちらから見てみてください。
HTMLは非常に単純に出来ており、sectionタグに各ページの本文を記載しているだけのようです。
JavaScriptは本のサイズ取得からアニメーションの方法まで若干ボリュームがありました。
本をモチーフにしたコンテンツは非常に多いと思いますので、メモ的にエントリー。

ソースコードは記事の最後でダウンロード可能です。

以下は動作デモの一部です。

棒グラフ

デモ

円グラフ

デモ

ネットワーク図

デモ

クロスブラウザに対応しており、IE、Firefox、Chrome、Safari、Operaで動作するようです。

興味のある方は試してみてください。

HTML5とCanvasで作られたゲームもなんだか沢山出てきたように思います。

本日はHTML5のゲームをまとまた「Showcase of Games Developed Using HTML5 Canvas」というエントリーのご紹介。

いくつかご紹介

Sinuous

プレイ

赤い点を避けて行く単純なゲームです。
iPhone・iPadでも遊べます。

Super Mario Kart

プレイ

画面は小さいですが、まさにマリオカート！
HTML5のCanvasで作られています。

Pacman

プレイ

ChromeだとJavaScriptが高速に動作するので難易度は高めです。

ソースコードがgithubにて配布中

これとは別に、Googleがパックマン30周年を記念して作ったゲームもあります。
http://www.google.com/pacman/

JQuery Racing

プレイ

コアライブラリにjQueryを使用しているレーシングゲーム。
十時キーを押すと、画面が動くため操作が難しいです、、、

Tetris

プレイ

恐らく誰もが知っているゲームであるテトリス。

サイトにはレトロなゲームからオリジナルのものまで他にも紹介されています。
興味の有る方はぜひ見てみてください。

デモ

画面を表示すると、マウスの動きに合わせてパーティクルも動くようになっています。
500個ほど表示させているようですが、動きもすごくスムーズですね。

以下のようなコードで動作させているようです。

function  run()
{
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "rgba(8,8,12,.65)";
        ctx.fillRect( 0 , 0 , canvasW , canvasH );
        ctx.globalCompositeOperation = "lighter";
       
        mouseVX    = mouseX - prevMouseX;
        mouseVY    = mouseY - prevMouseY;
        prevMouseX = mouseX;
        prevMouseY = mouseY;
       
        var toDist   = canvasW / 1.15;
        var stirDist = canvasW / 8;
        var blowDist = canvasW / 2;
       
        var Mrnd   = Math.random;
        var Mabs   = Math.abs;
        var Msqrt  = Math.sqrt;
        var Mcos   = Math.cos;
        var Msin   = Math.sin;
        var Matan2 = Math.atan2;
        var Mmax   = Math.max;
        var Mmin   = Math.min;
       
        var i = numMovers;
        while( i-- )
        {
                var m  = movers[i];
                var x  = m.x;
                var y  = m.y;
                var vX = m.vX;
                var vY = m.vY;
               
                var dX = x - mouseX;
                var dY = y - mouseY;
                var d = Msqrt( dX * dX + dY * dY );
                var a = Matan2( dY , dX );
                var cosA = Mcos( a );
                var sinA = Msin( a );
               
                if( isMouseDown )
                {
                        if( d  canvasW )
                {
                        nextX = canvasW;
                        vX *= -1;
                }
                else if( nextX <0 )
                {
                        nextX = 0;
                        vX *= -1;
                }
               
                if( nextY> canvasH )
                {
                        nextY = canvasH;
                        vY *= -1;
                }
                else if( nextY <0 )
                {
                        nextY = 0;
                        vY *= -1;
                }
               
                m.vX = vX;
                m.vY = vY;
                m.x  = nextX;
                m.y  = nextY;
               
                ctx.fillStyle = m.color;
                ctx.beginPath();
                ctx.arc( nextX , nextY , sc , 0 , radCirc , true );
                ctx.closePath();
                ctx.fill();          
        }
}

Flashでなくとも、こういった表現ができるのは嬉しいですね。