Canvasを使ってスタイリッシュなテキストが描画できる「CanvasText」
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」が良さそうだったのでご紹介。
Canvasでグラフやインタラクティブなコンテンツを作るのに便利そうだったのでご紹介。
３つのデモがサイトに掲載されているのですが、
グラフの作成、ドラッグ&ドロップ、アニメーションの動きと
それぞれのコードが確認できるようになっています。
スマートフォン用とPCの両方に対応できるようになっていて、
クリックとタッチイベントが発生した際に指定の動作をするには下のように書けば良いようです。
button.bind("click tap", function () {
//ここにコードを記述
} );
コードもシンプルに書けるので良さそうですね。
興味のある方は下のリンクからどうぞ！
これはちょっと使いたいかも。Canvasを手軽に扱えるライブラリです。
iPhone,iPad,Androidで動くように最適化されているので、スマートフォン用のHTMLアプリを作る際に便利ですね。
コードは以下にご紹介。
「PhiloGL」はオープンソースのWebGLフレームワークです。
データの視覚化や3Dゲーム開発に使えそうです。
かなり高機能な作りになっており、非常にレベルの高いデモを見る事ができます。
ちなみにWebGLとは、Canvas上で3D表示ができる技術なのですが
まだSafariやFirefox等の一部ブラウザでしか動作しないのが現状です。
本のページをめくるエフェクトを実装したい。
そんな方におすすめなのがCanvasを使用した本のページめくりの実装方法を記載した「Case Study: Page Flip Effect from 20thingsilearned.com」という記事のご紹介。
このHTML5RocksというサイトはGoogleが作成したサイトで、
HTML5に関する文書やチュートリアル、APIの使い方をまとめたサイトです。
記事を書いている方もGoogleの中の人のようで非常に勉強になります。
動作デモ
ページめくりの動作は
ドラッグする事でめくる動作と、クリックでページがふわふわ舞う動きの２パターンがありました。
実際の動作はこちらから見てみてください。
HTMLは非常に単純に出来ており、sectionタグに各ページの本文を記載しているだけのようです。
JavaScriptは本のサイズ取得からアニメーションの方法まで若干ボリュームがありました。
本をモチーフにしたコンテンツは非常に多いと思いますので、メモ的にエントリー。
ソースコードは記事の最後でダウンロード可能です。
「canvasXpress」はHTML5タグのcanvasで使えるグラフライブラリです。
棒グラフ、円グラフ、散布図、ヒートマップ、3D図などに対応しています。
以下は動作デモの一部です。
HTML5のゲーム
HTML5とCanvasで作られたゲームもなんだか沢山出てきたように思います。
本日はHTML5のゲームをまとまた「Showcase of Games Developed Using HTML5 Canvas」というエントリーのご紹介。
いくつかご紹介
JavaScriptで出来たパーティクルエンジンをご紹介。
コード量も多くないので、カスタマイズして使えそうです。
0