こんにちは。デザイナーのハルエです。 最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。 そこで見つけたのがこれ。「Chart.js」。 めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？ 折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
東京Node学園祭2011で出てきたものを触ってみよう、ということで。 node-canvasを使ったアプリをNode Ninjaにデプロイしてみた。 http://favicon.node-ninja.com/ ソースコードはGithubで公開しています。 https://github.com/sugyan/node-favicon table要素で作られたマス目をクリックで色付けていくと、ブラウザタブに表示されるfaviconがリアルタイムに変わっていく、というもの。 手元のMacBookPro(Mac OS X 10.6.8)のChrome 15.0.874.106, Firefox 7.0.1 では動作しました。Safariでは動的なfavicon変更は動かない…？ IEは知らない。 (※追記： Operaでも動くそうです) /faviconで返すコンテンツをnode-canvas
canvasベースのベクターグラフィクス描画用jsライブラリとして、既に各所で紹介されているpaper.jsですが、これを、ウェブに載せるグラフの描画に使ってみましょう、というお話です。 paper.jsではパスをつくって描画をしつつ、パスに対するhit testも可能ですし、アニメーションも実装することができます。プロジェクトサイトではオシャレなサンプルが多数掲載されていて、paper.jsで何ができそうなのかを簡単にざっくりと知ることが出来ます。 javascriptでインタラクティブなグラフを、というとGoogle Chart Toolsなど、既存のグラフ用ライブラリを使って簡単に済ませることもできますが、ひと手間加えて独自性のある表現を出したい場合は、paper.jsのようなライブラリを使ってみると良いかと思います。 試しにpaper.jsの学習がてら、下記リンク先にあるような棒グ
jquery.qrcode - jquery plugin for a pure browser qrcode generation QRコードをピュアJSで作れるjQueryプラグイン「jQuery.qrcode」。 通常QRコードというとサーバ側で画像にして画像を送信するというのが一般的ですが、このプラグインはブラウザ上で描画するタイプです。 <div id="qrcode"></div> というマークアップがあったとして、次のようにすることでQRコードを埋め込みます。 jquery('#qrcode').qrcode("this plugin is great"); カメラ等で読み取れば、「this plugin is great」がテキストとして読み取れます。 canvasを使っているので、canvas対応ブラウザでしか動作しない点に注意。 関連エントリ リンクにカーソルを合わせる
こんにちは、中川です。 今年も残すところあと１週間をきりましたね。 このところ色々と忙しかったので年末年始はゆっくりとしたいと思います。 さて、今回の話題ですが、node.jsを使ってサーバサイドでCanvasが利用できるということで試してみました。 それでは、早速使ってみましょう。 ■今回の環境 Ubuntu 10.10 node.js v0.3.1 npm 0.2.12-1 node-canvas v0.4.1 ■インストール node-canvasでは、cairoを利用しますので、事前にインストールします。 // sample.js var Canvas = require('canvas') , http = require('http'); http.createServer(function (req, res) { var canvas = new Canvas(200,20
Badass JavaScriptA showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett. You have probably seen face detection at work in programs like iPhoto and Picasa, but what if you could do that performantly in JavaScript? Chinese developer Liu Liu has done the honors, and implemented the algorithm using the canvas element. The algorithm is implemented on
はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
